<template>
	<view class="big-box">
		<!-- <orderTop :info="params"></orderTop> -->
		<view class="order-top">
			<view class="top-content">
				<view class="oil-item-top">
					<!-- <image :src="detail.image" mode="aspectFill">
					</image> -->
					<view class="oil-item-data">
						<view class="oil-title">
							<text>{{detail.name}}</text>
							<view class="collect" @click="collect(detail)">
								<text class="iconfont icon-shoucang" v-if="detail.is_collect == 0"></text>
								<text class="iconfont icon-shoucang1" v-if="detail.is_collect == 1"></text>
							</view>
						</view>
						<view class="address-box">
							<text class="address">{{detail.address}}</text>
							<view class="distance-box">
								<text class="distance" @click="toMap(detail)">距离{{detail.distance}}</text>
								<img class='GPS-img' src="../../../static/images/dizhi.png" alt=""
									@click="toMap(detail)">
								<!-- <view class="kp" @click="kpPopup">平台开票</view> -->
							</view>
						</view>
					</view>
				</view>
				<view class="oil-item-bottom">
					<view class="price-box-main">
						<view class="price-item" v-for="(item,index) in detail.applet_price_info" :key="index">
							<view v-if="item.is_show">
								<view v-if="item.id!=2"  class="o-price">
									<view >{{item.name}}￥{{item.price || '0.00'}}</view>
								</view>
								
								<view v-else class="price">
									<view >{{item.name}}￥{{item.price || '0.00'}}</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="active_banner df df-align-items" v-if="detail.company===1">
			<image src="https://www.chepaiyunhui.com/uploads/20221222/f0261acfc3a54eb6f4438b1b056eb818.gif"
				mode="scaleToFill"></image>
		</view>
		<view class="order-center">
			<view class="tab-list">
				<view class="tab-list-in df df-justify-content-between df-align-items">
					<view class="tab-item df df-flex-direction-column df-align-items" v-for="(item,index) in tabs"
						:key="index" @click="checkTab(item)">
						<text :class="check_index == item.id? 'hi-color': ''">{{item.name}}</text>
						<view class="b-line" v-show="check_index == item.id"></view>
					</view>
				</view>
			</view>
			<view class="impression" v-if="check_index == 1">
				<view class="w-center">
					<view class="oil-pub-t">
						<view class="">
							4.9
						</view>
						<u-rate active-color="#F12F63" :value="4.9" readonly></u-rate>
					</view>
					<view class="label-box df df-flex-wrap">
						<view class="label-item df df-justify-content-alin" v-for="(item,index) in labels" :key="index">
							{{item.name}}({{item.num}})
						</view>
					</view>
				</view>
			</view>
			<view class="oil-num" v-else>
				<view class="oil-num-gun">
					请选择油号 | 枪号
				</view>
				<view class="oil-num-center">
					<view class="gun-choose" @click="openOil">
						<view class="choose-left">
							{{oil_name}}
							<img src="../../../static/images/jiao.png" alt="">
						</view>
						<view class="choose-right">
							<text>{{form.gun_name}}</text>号
							<img src="../../../static/images/jiao.png" alt="">
						</view>
					</view>
					<view class="oil-price">
						<view class="oil-price-text">
							优惠价
						</view>
						<view class="oil-price-num" v-if="showod">
							￥<text v-if="od.bitInfo">{{od.bitInfo.pay_price}}</text>
								<text v-else>{{od.p_price}}</text>
							/L起
							<view class="price-icon">
								<u-icon @click="priceRulePopup" name="question-circle" color="#C4C4C4" size="12">
								</u-icon>
							</view>
						</view>
						<view class="oil-price-num" v-else>
							￥
							<text v-if="detail.privilegeType !== '1'">{{detail.p_price}}</text>
							<text v-else>{{detail.yx_bit.pay_price || detail.p_price}}</text>
							/L起
							<view class="price-icon">
								<u-icon @click="priceRulePopup" name="question-circle" color="#9a9a9a" size="12">
								</u-icon>
							</view>
						</view>
					</view>
					<view class="oil-price-right">
						<view class="price-right-top">
							油站价￥{{detail.price || '0.00'}}/L
						</view>
						<view class="price-right-top">
							国标价￥{{detail.o_price|| '0.00'}}/L
						</view>
					</view>
				</view>
				<view class="active-price"
					v-if="detail.yx_bit && od.is_discount !== 1 && detail.privilegeType == 1">
					<img class='price-image' src="../../../static/images/jiao-1.jpg" alt="">
					<view class="active-price-text">
						<rich-text :nodes="contentA"></rich-text>
					</view>
				</view>
				<view class="sel-monney-title">
					加油金额
				</view>
				<view class="input-box df df-align-items df-justify-content-between" @click="closeProp">
					<text>￥</text>
					<input type="digit" class="price-input" placeholder-style="font-size:26rpx" placeholder="请输入油机金额"
						v-model="form.total" @blur="getprice" @input="valueChange" :disabled="no_input">
					<view v-if="od.num">约{{od.num}}L</view>
					<view v-else>0.00L</view>
				</view>
				<view class="monney-list df df-justify-content-between">
					<view
						:class="item.amount == form.total && act? 'act-item  df df-flex-direction-column df-justify-content-alin': 'monney-item df df-flex-direction-column df-justify-content-alin'"
						v-for="(item,index) in qk_list" :key="index" @click="selQk(item)">
						<text class="t-tltle">￥{{item.amount}}</text>
						<text class="youhui">最高优惠￥{{item.dis_total}}</text>
					</view>
				</view>
				<view class="order-dts height-auto df df-justify-content-between df-flex-wrap df-align-items"
					v-if="showod && detail.privilegeType !== 1">
					<view class="order-dts-item df">
						<view>加油升数：</view>
						<text>{{od.num}}</text>
					</view>
					<view class="order-dts-item df">
						<view>加油补贴：</view>
						<text v-if="od.deduct_amount && od.deduct_amount>0">-￥{{od.deduct_amount.toFixed(2)}}</text>
						<text v-else>￥0.00</text>
					</view>
				</view>

				<!-- <view class="order-dts df df-justify-content-between df-flex-wrap df-align-items"
					v-if="showod && detail.privilegeType == 0">
					<view class="order-dts-item df">
						<view>加油升数：</view>
						<text>{{od.num}}</text>
					</view>
					<view class="order-dts-item df">
						<view>加油补贴：</view>
						<text v-if="od.deduct_amount && od.deduct_amount>0">-￥{{od.deduct_amount.toFixed(2)}}</text>
						<text v-else>￥0.00</text>
					</view>
				</view> -->

				<!-- 抵扣商品消息 -->
				<view class="goods-box" v-if="showod && od.goods.name && detail.privilegeType == 2">
					<text>兑换商品：</text>
					<view class="goods-info">
						<image v-if="od.goods.image" :src="IMG_URL+od.goods.image" mode="aspectFill"></image>
						<view class="goods-detail">
							<text>{{od.goods&&od.goods.name || ""}}</text>
							<view class="color-red">￥{{od.goods&&od.goods.price || ""}}</view>
						</view>
					</view>
				</view>
				<!-- 抵扣商品消息 -->
				<view class="goods-box" v-if="showod && od.goods.name && detail.privilegeType == 1">
					<text>赠送商品：</text>
					<view class="goods-info">
						<image v-if="od.goods.image" :src="IMG_URL+od.goods.image" mode="aspectFill"></image>
						<view class="goods-detail">
							<text>{{od.goods&&od.goods.name || ""}}</text>
							<view class="color-red">￥{{od.goods&&od.goods.price || ""}}</view>
						</view>
					</view>
				</view>
				<!-- 消费券信息 -->
				<view class="order-dts-item df df-justify-content-between "
					v-if="od.is_discount !== 1 && showod && detail.privilegeType == 0 && od.discount_amount !== 0">
					<view></view>
					<view class="df">
						<view class="coupon-tips" style="color: #3d3d3d;">
							<image src="/static/mine/coupon.png" mode="aspectFit"></image>
							支付完成后得
							<view style="font-size: 24rpx;font-weight: bold;color: #F12F63"
								v-if="od.discount_amount && od.discount_amount*1>0">
								￥{{Math.floor(od.discount_amount).toFixed(2)}}</view>
							<view v-else style="font-weight: bold;color: #F12F63">￥0.00</view>
							优惠券,支付后在个人中心查看
						</view>
					</view>
					<view></view>
				</view>
			</view>
		</view>
		<view class="sel-b-box" v-if="check_index !== 1">
			<!-- <view class="yh" v-if="showod && detail.privilegeType == 1"> -->
			<view class="yh" v-if="showod">
				<!-- 合计优惠 -->
				<view class="yh-item1">
					<view class="yh-item1-left">
						<text>合计优惠</text>
					</view>
					<view>
						<text style="color: #F12F63;"
							class="item1-right-text">-￥{{Number(od.totalDiscount).toFixed(2)}}</text>
					</view>
				</view>
				<!-- 平台优惠 -->
				<view class="yh-item">
					<view class="yh-item-left">
						<view class="img-box">
							<image class='icon-img0' src="../../../static/images/del-money.png" mode="aspectFill">
							</image>
						</view>
						<text>平台优惠</text>
					</view>
					<view class="df">
						<text style="color: #F12F63;"
							class="item-right-text">-￥{{Number(od.dis_total).toFixed(2)}}</text>
						<u-icon v-if="od.bitInfo && form.total >= yx_bit.oilmoney" @click="preferPopup" name="question-circle"
							color="#F12F63" size="18">
						</u-icon>
					</view>
				</view>
				<!-- 优惠券 -->
				<view class="yh-item" v-if="oil_coupon.id.length > 0">
					<view class="yh-item-left">
						<view class="img-box">
							<image class='icon-img' src="../../../static/images/quan.png" mode="aspectFill"></image>
						</view>
						<text style="color: #F12F63;">平台优惠券</text>
					</view>
					<view @click="$navigateTo('/pages/mine/coupon/coupon?total='+ od.userInputTotal +'&show=true')">
						<!-- 多张优惠券 -->
						<text class="item-right-text"
							style="color: #F12F63;">{{oil_coupon.id.length > 0 ? '-￥'+oil_coupon.price : (detail.oilcouponNum && Number(detail.oilcouponNum) > 0 ? `有可用优惠券` : '暂无可用平台券')}}</text>
						<text class="iconfont icon-chakangengduo" style="color: #F12F63;font-size: 28rpx;"></text>
					</view>
				</view>
				<view class="yh-item" v-else>
					<!-- v-if="Number(od.monthoil_money) === 0" -->
					<view class="yh-item-left">
						<view class="img-box">
							<image class='icon-img' src="../../../static/images/quan.png" mode="aspectFill"></image>
						</view>
						<text>平台优惠券</text>
						<text v-if="radioVisible2  && od.userInputTotal >= detail.coupon.full" style='color: #F12F63;font-size: 24rpx;'>({{(detail.coupon.amount/detail.coupon.nums)}}元满减券)</text>
					</view>
					<view @click="$navigateTo('/pages/mine/coupon/coupon?total='+ od.userInputTotal +'&show=true')" v-if="!radioVisible2  || od.userInputTotal < detail.coupon.full">
						<!-- <text
							style="color: #a0a0a0;font-size: 24rpx;">{{(oil_coupon.id || oil_coupon.id+'' === '0') ? '-￥'+oil_coupon.price : (detail.oilcouponNum && Number(detail.oilcouponNum) > 0 ? `${detail.oilcouponNum}张可用` : '暂无可用平台券')}}</text>
							<text class="iconfont icon-chakangengduo" style="color: #a0a0a0;font-size: 22rpx;"></text> -->
						<!-- 多张优惠券 -->
						<text
							class="item-right-text">{{oil_coupon.id.length > 0 ? '-￥'+oil_coupon.price : (detail.oilcouponNum && Number(detail.oilcouponNum) > 0 ? `有可用优惠券` : '暂无可用平台券')}}</text>
						<text class="iconfont icon-chakangengduo" style="color: #a4a4a4;font-size: 28rpx;"></text>
					</view>
					<view @click="$navigateTo('/pages/mine/coupon/coupon?total='+ od.userInputTotal +'&show=true')" v-if="radioVisible2  && od.userInputTotal >= detail.coupon.full">
						<text
							class="item-right-text">-￥{{(detail.coupon.amount/detail.coupon.nums)}}</text>
						<text class="iconfont icon-chakangengduo" style="color: #a4a4a4;font-size: 28rpx;"></text>
					</view>
				</view>
				<!-- 加油金 -->
				<view class="yh-item" v-if="memberMoney_ID == 0">
					<view class="yh-item-left">
						<view class="img-box">
							<image class='icon-img2' src="../../../static/images/money.png" mode="aspectFill"></image>
						</view>
						<view>
							<text>加油补贴</text>
							<text
								class='item-right-text'>(余额{{memberMoney_info.oil_balance || memberMoney_info2.oil_balance}})</text>
						</view>
					</view>
					<view @click="seeOilMoney()" class="yh-item-right">
						<!-- <text style="color: #a0a0a0;font-size: 24rpx;">暂无可用加油金</text> -->
						<view>
							<text class="item-right-text">去使用</text>
							<text class="iconfont icon-chakangengduo" style="font-size: 28rpx;color: #a4a4a4;"></text>
						</view>
						<view v-if="memberMoney_info2.balanceNums !== 0">
							<text
								class="item-right-balance">本月剩余：{{memberMoney_info.balanceNums || memberMoney_info2.balanceNums}}升</text>
						</view>
					</view>
				</view>
				<view class="yh-item" style="" v-else>
					<view class="yh-item-left">
						<view class="img-box">
							<image class='icon-img2' src="../../../static/images/money.png" mode="aspectFill"></image>
						</view>
						<view>
							<text style="color: #F12F63;">加油补贴</text>
							<text class="item-right-text"
								style="color: #F12F63;">(余额{{memberMoney_info.oil_balance || memberMoney_Detail.oil_balance}})</text>
						</view>
					</view>
					<view @click="seeOilMoney()" class="yh-item-right">
						<!-- <text style="color: #a0a0a0;font-size: 24rpx;">暂无可用加油金</text> -->
						<view class="">
							<text class="item-right-text" style="color: #F12F63;">已使用</text>
							<text class="iconfont icon-chakangengduo" style="color: #F12F63;"></text>
						</view>
						<view v-if="memberMoney_info || memberMoney_Detail">
							<text class="item-right-balance"
								v-if="memberMoney_info.is_old == 0 || memberMoney_Detail.is_old == 0"
								style="color: #F12F63;">本月剩余：{{memberMoney_info.balanceNums || memberMoney_Detail.balanceNums}}升</text>
						</view>
					</view>
				</view>

				<!-- 会员加油金 -->
				<view class="yh-item" v-if="member_id !== 0">

					<view class="yh-item-left">
						<view class="img-box">
							<image class='icon-img3' src="../../../static/images/vip.png" mode="aspectFill"></image>
						</view>
						<view class="">
							<view>
								<text style="color: #F12F63;">会员加油金</text>
								<text class="item-right-text" v-if="member_info != ''"
									style="color: #F12F63;">(余额{{member_info.money}})</text>
								<text class="item-right-text" v-else style="color: #F12F63;">(余额{{jiayou_money}})</text>
							</view>
						</view>
					</view>
					<view class="yh-item-right">
						<view @click="selectMember(detail.id)" class="">
							<text class="item-right-text" style="color: #F12F63;">已使用</text>
							<text class="iconfont icon-chakangengduo" style="color: #F12F63;font-size: 28rpx;"></text>
						</view>

						<view v-if="member_date !== 0 || member_info != ''">
							<text class="item-right-balance" style="color: #F12F63;"
								v-if="member_info == ''">本月剩余：{{balanceNums}} 升</text>
							<text class="item-right-balance" style="color: #F12F63;"
								v-else>本月剩余：{{member_info.balanceNums}} 升</text>
						</view>
					</view>
				</view>
				<view class="yh-item" v-else>
					<view class="yh-item-left">
						<view class="img-box">
							<image class='icon-img3' src="../../../static/images/vip.png" mode="aspectFill"></image>
						</view>
						<view class="">
							<view>
								<text>会员加油金</text>
								<text class="item-right-text" v-if="member_info != ''">(余额{{member_info.money}})</text>
								<text class="item-right-text" v-else>(余额{{jiayou_money}})</text>
							</view>
						</view>
					</view>
					<view class="yh-item-right">
						<view @click="selectMember(detail.id)">
							<text class="item-right-text">去使用</text>
							<text class="iconfont icon-chakangengduo" style="color: #a4a4a4;font-size: 28rpx;"></text>
						</view>

						<view v-if="member_date !== 0 || member_info != ''">
							<text class="item-right-balance" v-if="member_info == ''">本月剩余：{{balanceNums}} 升</text>
							<text class="item-right-balance" v-else>本月剩余：{{member_info.balanceNums}} 升</text>
						</view>
					</view>
				</view>
				<!-- 服务费 -->
				<view class="yh-item">
					<view class="yh-item-left">
						<view class="img-box">
							<image class='icon-img4' src="../../../static/images/service.png" mode="aspectFill"></image>
						</view>
						<text>服务费</text>
						<u-icon @click="servicePopup" name="question-circle" size="15" color="#666666">
						</u-icon>
					</view>
					<view>
						<text v-if="od.serviceFee == 0">￥0.00</text>
						<text v-else style="color: #666666;">+￥{{od.serviceFee}}</text>
					</view>
				</view>
			</view>
			<view class="yh-2" v-else>
				<!-- 优惠券 -->
				<view class="yh-item" v-if="oil_coupon.id.length > 0">
					<view class="yh-item-left">
						<view class="img-box">
							<image class='icon-img' src="../../../static/images/quan.png" mode="aspectFill"></image>
						</view>
						<text style="color: #F12F63;">平台优惠券</text>
					</view>
					<view @click="$navigateTo('/pages/mine/coupon/coupon?total='+ od.userInputTotal +'&show=true')">
						<!-- 多张优惠券 -->
						<text class="item-right-text"
							style="color: #F12F63;">{{oil_coupon.id.length > 0 ? '-￥'+oil_coupon.price : (detail.oilcouponNum && Number(detail.oilcouponNum) > 0 ? `有可用优惠券` : '暂无可用平台券')}}</text>
						<text class="iconfont icon-chakangengduo" style="color: #F12F63;font-size: 28rpx;"></text>
					</view>
				</view>
				<view class="yh-item" v-else>
					<!-- v-if="Number(od.monthoil_money) === 0" -->
					<view class="yh-item-left">
						<view class="img-box">
							<image class='icon-img' src="../../../static/images/quan.png" mode="aspectFill"></image>
						</view>
						<text>平台优惠券</text>
						<text v-if="radioVisible2 && od.userInputTotal >= detail.coupon.full" style='color: #F12F63;font-size: 24rpx;'>({{(detail.coupon.amount/detail.coupon.nums)}}元满减券)</text>
					</view>
					<view @click="$navigateTo('/pages/mine/coupon/coupon?total='+ od.userInputTotal +'&show=true')" v-if="!radioVisible2 || od.userInputTotal < detail.coupon.full">
						<!-- <text
							style="color: #a0a0a0;font-size: 24rpx;">{{(oil_coupon.id || oil_coupon.id+'' === '0') ? '-￥'+oil_coupon.price : (detail.oilcouponNum && Number(detail.oilcouponNum) > 0 ? `${detail.oilcouponNum}张可用` : '暂无可用平台券')}}</text>
							<text class="iconfont icon-chakangengduo" style="color: #a0a0a0;font-size: 22rpx;"></text> -->
						<!-- 多张优惠券 -->
						<text
							class="item-right-text">{{oil_coupon.id.length > 0 ? '-￥'+oil_coupon.price : (detail.oilcouponNum && Number(detail.oilcouponNum) > 0 ? `有可用优惠券` : '暂无可用平台券')}}</text>
						<text class="iconfont icon-chakangengduo" style="color: #a4a4a4;font-size: 28rpx;"></text>
					</view>
					<view @click="$navigateTo('/pages/mine/coupon/coupon?total='+ od.userInputTotal +'&show=true')" v-if="radioVisible2 && od.userInputTotal >= detail.coupon.full">
						<text
							class="item-right-text">-￥{{(detail.coupon.amount/detail.coupon.nums)}}</text>
						<text class="iconfont icon-chakangengduo" style="color: #a4a4a4;font-size: 28rpx;"></text>
					</view>
				</view>
				<!-- 加油金 -->
				<view class="yh-item" v-if="memberMoney_ID == 0">
					<view class="yh-item-left">
						<view class="img-box">
							<image class='icon-img2' src="../../../static/images/money.png" mode="aspectFill"></image>
						</view>
						<view>
							<text>加油补贴</text>
							<text
								class='item-right-text'>(余额{{memberMoney_info.oil_balance || memberMoney_info2.oil_balance}})</text>
						</view>
					</view>
					<view @click="seeOilMoney()" class="yh-item-right">
						<!-- <text style="color: #a0a0a0;font-size: 24rpx;">暂无可用加油金</text> -->
						<view>
							<text class="item-right-text">去使用</text>
							<text class="iconfont icon-chakangengduo" style="font-size: 28rpx;color: #a4a4a4;"></text>
						</view>
						<view v-if="memberMoney_info2.balanceNums !== 0">
							<text
								class="item-right-balance">本月剩余：{{memberMoney_info.balanceNums || memberMoney_info2.balanceNums}}升</text>
						</view>
					</view>
				</view>
				<view class="yh-item" style="" v-else>
					<view class="yh-item-left">
						<view class="img-box">
							<image class='icon-img2' src="../../../static/images/money.png" mode="aspectFill"></image>
						</view>
						<view>
							<text style="color: #F12F63;">加油补贴</text>
							<text class="item-right-text"
								style="color: #F12F63;">(余额{{memberMoney_info.oil_balance || memberMoney_Detail.oil_balance}})</text>
						</view>
					</view>
					<view @click="seeOilMoney()" class="yh-item-right">
						<!-- <text style="color: #a0a0a0;font-size: 24rpx;">暂无可用加油金</text> -->
						<view class="">
							<text class="item-right-text" style="color: #F12F63;">已使用</text>
							<text class="iconfont icon-chakangengduo" style="color: #F12F63;"></text>
						</view>
						<view v-if="memberMoney_info || memberMoney_Detail">
							<text class="item-right-balance"
								v-if="memberMoney_info.is_old == 0 || memberMoney_Detail.is_old == 0"
								style="color: #F12F63;">本月剩余：{{memberMoney_info.balanceNums || memberMoney_Detail.balanceNums}}升</text>
						</view>
					</view>
				</view>

				<!-- 会员加油金 -->
				<view class="yh-item" v-if="member_id !== 0">

					<view class="yh-item-left">
						<view class="img-box">
							<image class='icon-img3' src="../../../static/images/vip.png" mode="aspectFill"></image>
						</view>
						<view class="">
							<view>
								<text style="color: #F12F63;">会员加油金</text>
								<text class="item-right-text" v-if="member_info != ''"
									style="color: #F12F63;">(余额{{member_info.money}})</text>
								<text class="item-right-text" v-else style="color: #F12F63;">(余额{{jiayou_money}})</text>
							</view>
						</view>
					</view>
					<view class="yh-item-right">
						<view @click="selectMember(detail.id)" class="">
							<text class="item-right-text" style="color: #F12F63;">已使用</text>
							<text class="iconfont icon-chakangengduo" style="color: #F12F63;font-size: 28rpx;"></text>
						</view>

						<view v-if="member_date !== 0 || member_info != ''">
							<text class="item-right-balance" style="color: #F12F63;"
								v-if="member_info == ''">本月剩余：{{balanceNums}} 升</text>
							<text class="item-right-balance" style="color: #F12F63;"
								v-else>本月剩余：{{member_info.balanceNums}} 升</text>
						</view>
					</view>
				</view>
				<view class="yh-item" v-else>
					<view class="yh-item-left">
						<view class="img-box">
							<image class='icon-img3' src="../../../static/images/vip.png" mode="aspectFill"></image>
						</view>
						<view class="">
							<view>
								<text>会员加油金</text>
								<text class="item-right-text" v-if="member_info != ''">(余额{{member_info.money}})</text>
								<text class="item-right-text" v-else>(余额{{jiayou_money}})</text>
							</view>
						</view>
					</view>
					<view class="yh-item-right">
						<view @click="selectMember(detail.id)">
							<text class="item-right-text">去使用</text>
							<text class="iconfont icon-chakangengduo" style="color: #a4a4a4;font-size: 28rpx;"></text>
						</view>

						<view v-if="member_date !== 0 || member_info != ''">
							<text class="item-right-balance" v-if="member_info == ''">本月剩余：{{balanceNums}} 升</text>
							<text class="item-right-balance" v-else>本月剩余：{{member_info.balanceNums}} 升</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 298活动跳转 -->

		<view class="active_banner" @click="$navigateTo('/pages/active/doubleEleven?id=' + activeId)"
			v-if="detail.province_id*1 === 330000&&detail.company===1">
			<image :src="bannerImage" mode="scaleToFill"></image>
		</view>

		<view class="member-oil-money-box" v-if="is_active === 1 && check_index !== 1 && memberList.length !== 0">
			<view class="segmented-tab">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
					activeColor="rgba(241, 47, 99, 1)" styleType="button"></uni-segmented-control>
			</view>
			<!-- 会员加油金 -->
			<view class="member-oil-money" @click="checkedSetMeal()">
				<view class="label">
					<text>会员加油金</text>
					<view class="u-icon">
						<u-icon @click="memberOilPopup" name="question-circle" color="#F12F63" size="18">
						</u-icon>
					</view>
				</view>
				<text class="member_oil_tip">(非储值，请了解后购买)</text>
				<view class="info-center">
					<view class="time-rule">
						<view class="rule-money">
							<text class="addoil_money">{{Number(memberList[current].amount).toFixed(0)}}</text> 元加油金
						</view>
						<view class="rule-text" v-for="(item,index) in memberList" :key="index">
							<template class='rule-text-content' v-if="index == current">
								<view v-if="item.intro==''">每月限{{item.limit || "***"}}升</view>
								<view v-if="item.intro==''">总计：{{item.nums || "***"}}升</view>
								<rich-text v-if="item.intro!=''" :nodes="item.intro">
								</rich-text>
							</template>
						</view>
					</view>
					<view class="number">
						<view class="calc">
							<text class="calc-money">每升立减</text>
							<text
								class="num">{{memberList.length > 0 ? Number(memberList[current].dis_price).toFixed(2) : '***'}}</text>
							<text class="calc-money">元</text>
						</view>
						<view class="calc-text">
							<view>
								账户余额膨胀{{(Number(memberList[current].amount) / Number(memberList[current].price)).toFixed(1)}}倍！
							</view>
							<view>有效期{{memberList[current].valid}}天</view>
						</view>
					</view>
				</view>
				<view class="info-bottom">
					<!-- <view class="active-rule" @click.stop="$refs.memberOilPopup.open()">活动须知<text
							class="iconfont icon-chakangengduo" style="color: #F12F63;font-size: 28rpx;"></text></view> -->
					<view class="">

					</view>
					<view class="radio">
						<text>￥{{memberList.length > 0 ? Number(memberList[current].price).toFixed(2) : '***'}}</text>
						<radio v-if="detail && detail.province_id*1 !== 330000" color="#F12F63" style="transform: scale(0.8)" :checked="radioVisible" />
						<!-- <radio v-else disabled color="#F12F63" style="transform: scale(0.8)" :checked="radioVisible" /> -->
					</view>
				</view>
			</view>
		</view>
		<view class="pay-type" v-if="check_index !== 1">
			<view class="pay-type-title">
				支付方式
			</view>
			<radio-group @change="radioChange">
				<label>
					<!--  #ifdef MP-WEIXIN  -->
					<view class="df df-justify-content-between df-align-items">
						<view class="df df-align-items">
							<text class="iconfont icon-weixinzhifu" style="color: #6bcc03;"></text>
							<text style="padding-left: 20rpx;">微信支付</text>
						</view>
						<radio :value="item.value" :checked="true" color="#F12F63" style="transform: scale(.8);" />
					</view>
					<!-- #endif -->
					<!--  #ifdef MP-ALIPAY  -->
					<view class="df df-justify-content-between df-align-items">
						<view class="df df-align-items">
							<image src="/pages_order/static/images/zhifubao_icon.jpg" mode="scaleToFill"
								style="width: 32rpx;height: 32rpx;"></image>
							<text style="padding-left: 20rpx;">支付宝支付</text>
						</view>
						<radio :value="item.value" :checked="true" color="#F12F63" style="transform: scale(.8);" />
					</view>
					<!-- #endif -->
				</label>
			</radio-group>
		</view>
		<!-- 占位盒子 -->
		<view style="height: 320rpx;"></view>

		<!-- 会员加油金套餐优惠 -->
		<view class="package_box" v-if="is_active === 1 && memberList[current] && !detail.coupon">
			<view class="package-box-big">
				<text class="box-title">加油金限时抢 抢了就划算</text>
				<!-- <view @click.stop="$refs.memberOilPopup.open()">
					<text class="active-rule">活动须知<text class="iconfont icon-chakangengduo"
							style="color: #F12F63;font-size: 28rpx;"></text></text>
				</view> -->
				<view class="active-rule">
					<u-icon @click="memberOilPopup" name="question-circle" color="#F12F63" size="18">
					</u-icon>
				</view>
				<view class="package_number">
					<view class="calc">
						<view>每升立减</view>
						<view class="num">{{ Number(memberList[current].dis_price).toFixed(2) || '***'}}元</view>
					</view>
					<view class="all">
						每月限
						<view class="num">{{ Number(memberList[current].limit) || "***" }}升</view>
					</view>
					<view class="calc">
						总计：
						<view class="num">{{ Number(memberList[current].nums) || "***" }}升</view>
					</view>
				</view>
			</view>
			<view class="radio">
				<text>￥{{ Number(memberList[current].price).toFixed(2) || '***' }}</text>
				<view class="pushPay_btn" v-if="detail && detail.province_id*1 !== 330000" @click="aloneBuyOil()">
					立即抢购
				</view>
			</view>
		</view>
		<!-- 优惠券 -->
		<view class="package_box" v-if="detail.coupon">
			<view class="package-box-big">
				<text class="box-title" @click="couDetailPopup">{{detail.coupon.amount}}元加油券包</text>
				<view class="box-text" @click="couDetailPopup">
					{{detail.coupon.intro}}
				</view>
				<view @click="toRule">
					<text class="box-rule">随单购注意事项</text>
				</view>
				<view class="active-rule" @click="checkedCoupon()">
					￥{{detail.coupon.price}}
					<radio :value="item.value" :checked="radioVisible2" color="#F12F63" style="transform: scale(.8);" />
				</view>
				<view class="package_number">
					
				</view>
			</view>
			<view>
				<!-- <view class="pushPay_btn" @click="aloneBuyOil()">
					立即抢购
				</view> -->
			</view>
		</view>
		<view class="pay-box">
			<view class="pay-big">
				<view class="total">
					<view class="total-content" v-if="od.total || Number(od.total) === 0">
						<view class="total-price">￥{{od.total}}<text
								class='stationTakePrice'>￥{{od.userInputTotal}}</text></view>
						<view class="discount" style="font-size: 26rpx;" v-if="detail.privilegeType*1 !== 2">
							<text v-if="radioVisible2">含{{detail.coupon.amount}}元券包￥{{detail.coupon.price}}</text>
							<text v-else>已优惠￥{{od.totalDiscount}}</text>
						</view>
					</view>
				</view>
				<view class="total-detail" v-if="od.total || Number(od.total) === 0" @click="yhmx">
					优惠明细{{' '}}
					<u-icon name="arrow-down" size="12"></u-icon>
				</view>
				<view class="pay-m">
					<view class="pay-btn" v-if="!paying && Number(od.monthoil_money) === 0" @click="toPay">去支付</view>
					<view class="pay-btn" v-if="!paying && Number(od.monthoil_money) > 0" @click="goVipPay">去支付</view>
				</view>
			</view>
		</view>
		<!-- 优惠明细 -->
		<uni-popup ref="totalDetail_show" type="bottom" :mask-click="false">
			<view class="detail-content">
				<view class="w-center">
					<view class="m-detail-title df df-justify-content-between df-align-items">
						<view></view>
						<text>待支付明细</text>
						<view class="iconfont icon-guanbi" style="color: #999999;font-size: 32rpx;"
							@click="close">
						</view>
					</view>
					<view class="d-content">
						<view class="item-title">
							商品明细
						</view>
						<view class="d-item">
							<view class="item-left">
								加油升数
							</view>
							<view class="item-right">
								{{od.num}}升
							</view>
						</view>
						<view class="d-item">
							<view class="item-left">
								加油金额
							</view>
							<view class="item-right">
								￥{{od.userInputTotal}}
							</view>
						</view>
						<view class="item-title">
							优惠明细
						</view>
						<view class="d-item" v-if="!radioVisible2 || od.userInputTotal < detail.coupon.full">
							<view class="item-left">
								直降优惠
							</view>
							<view class="item-right">
								-￥{{Number(od.discount_amount).toFixed(2)}}
							</view>
						</view>
						<view class="d-item" v-if="!radioVisible2 || od.userInputTotal < detail.coupon.full">
							<view class="item-left">
								平台优惠券
							</view>
							<view class="item-right">
								{{oil_coupon.id.length > 0 ? '-￥'+oil_coupon.price : (detail.oilcouponNum && Number(detail.oilcouponNum) > 0 ? `有可用优惠券` : '暂无可用平台券')}}
							</view>
						</view>
						<view class="d-item" v-if="radioVisible2 && od.userInputTotal >= detail.coupon.full">
							<view class="item-left">
								平台优惠券<text style="color: #F12F63;font-size: 24rpx;">({{(detail.coupon.amount/detail.coupon.nums)}}元满减券)</text>
							</view>
							<view class="item-right">
								-￥{{Number(od.dis_total).toFixed(2)}}
							</view>
						</view>
						<view class="d-item" v-if="!radioVisible2 || od.coupon_price==0">
							<view class="item-left">
								加油补贴
							</view>
							<view class="item-right" v-if="memberMoney_ID == 0 || od.deduct_amount == 0">
								-￥0.00
							</view>
							<view class="item-right" v-else>
								-￥{{Number(od.deduct_amount).toFixed(2)}}
							</view>
						</view>
						<view class="d-item" v-if="!radioVisible2 || od.userInputTotal < detail.coupon.full">
							<view class="item-left">
								会员加油金
							</view>
							<view class="item-right" v-if="member_id !== 0">
								-￥{{Number(od.dis_total).toFixed(2)}}
							</view>
							<view class="item-right" v-else>
								-￥0.00
							</view>
						</view>
						<view class="d-item">
							<view class="item-left">
								服务费
							</view>
							<view class="item-right" v-if="od.serviceFee == 0">
								￥0.00
							</view>
							<view class="item-right" v-else>
								+￥{{Number(od.serviceFee).toFixed(2)}}
							</view>
						</view>
						<view class="item-title" v-if="radioVisible2">
							其他商品
						</view>
						<view class="d-item" v-if="radioVisible2">
							<view class="item-left">
								购买{{detail.coupon.amount}}元加油券包
							</view>
							<view class="item-right">
								+￥{{detail.coupon.price}}
							</view>
						</view>
						<view class="d-item">
							<view class="item-left">
								本次优惠
							</view>
							<view class="item-right" style="color: #F12F63;"
								v-if="od.totalDiscount && od.totalDiscount>0">
								-￥{{Number(od.totalDiscount).toFixed(2)}}
							</view>
							<view class="item-right" v-else>
								￥0.00
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 枪号 -->
		<uni-popup ref="oil_show" type="bottom" :mask-click="false">
			<view class="m-detail">
				<view class="w-center">
					<view class="m-detail-title df df-justify-content-between df-align-items">
						<view></view>
						<text>选择油号/枪号</text>
						<view class="iconfont icon-guanbi" style="color: #999999;font-size: 32rpx;" @click="close">
						</view>
					</view>
					<!-- <view class="label-title" style="padding-bottom: 16rpx;padding-top: 40rpx;">全部商品</view>
					<view class="shop-list df df-flex-wrap">
						<view class="shop-item">汽油</view>
					</view> -->
					<view class="label-title" style="padding-bottom: 16rpx;padding-top: 40rpx;">选择油号</view>
					<view class="shop-list df df-flex-wrap">
						<view :class="oil_name == item.name? 'act-item': ''" v-for="(item,index) in oil_list"
							:key="index" @click="checkOilType(item)">{{item.name}}</view>
					</view>
					<view class="label-title" style="padding-bottom: 16rpx;padding-top: 40rpx;">选择枪号</view>
					<scroll-view scroll-y="true" style="height: 20vh;margin-top: 10rpx;">
						<view class="shop-list df df-flex-wrap">
							<view :class="form.gun_name == item.name? 'act-item': ''" v-for="(item,index) in gun_list"
								:key="index" @click="selGun(item)">{{item.name}}</view>
						</view>
					</scroll-view>
					<view class="label-title" style="padding-bottom: 16rpx;padding-top: 40rpx;">重要说明</view>
					<view class="important">
						1、<text>请先加油后下单</text>，即您到站后，与工作人员确认油号、枪号后再付款。
						<br>
						2、请勿先付款后加油。若您已先下单付款，请于24小时内到加油站完成加油；若您在24小时内未完成加油，请及时发起退单；逾期退单可能会退单失效。
					</view>
				</view>
				<view class="b-out">
					<view class="sel-btn" @click="closeProp()">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 超出距离提示框 -->
		<!-- <toast-model class="model" ref="toastModel" title-size="40" :title="modelTitle" :content="content"
			@confirm="modelConfirm"></toast-model> -->
			
			<pay-notice class="model" ref="payNotice" title-size="40" :payNoticeItem="payNoticeItem" :title="modelTitle" :content="content"
				:lat="modellat" :lng="modellng"	@confirm="modelConfirm" :station_name="modelStatation" :station_address="modeladdress"></pay-notice>
			
			
			
		<!-- 随机立减 -->
		<uni-popup class="random-reduce" ref="random" type="center" :mask-click="false">
			<view class="slot-view">
				<text class="iconfont icon-guanbi" style="color: #cccccc;font-size: 30rpx;" @click="close">
				</text>
				<view class="random-money">
					<image src="/static/home/red-bag.png" mode="widthFix"></image>
					<!-- 浙江油站显示 -->
					<template v-if="detail&&detail.province_id*1 === 330000">
						<template v-if="randomInfo.rand_coupon_amount*1>0">
							<text>随机立减</text>
							<text>￥{{randomInfo.rand_coupon_amount&&Number(randomInfo.rand_coupon_amount).toFixed(2) || '0.00'}}</text>
						</template>
						<text class="no-reduction" v-else>很遗憾，此次未减免金额！</text>
					</template>
				</view>
				<view class="pay-view">
					<view class="total-money">
						<text>合计：</text>
						<text>￥</text>
						<text>{{randomInfo.total&&Number(randomInfo.total).toFixed(2) || '0.00'}}</text>
					</view>
					<view class="pay-btn" @click="wxPay()">
						<text>立即支付</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 会员加油金-说明 -->
		<uni-popup ref="memberOilPopup" type="bottom" background-color="#fff" :mask-click="false">
			<view class="m-detail member-oil-popup">
				<view class="w-center">
					<view class="m-detail-title df df-justify-content-between df-align-items coutem">
						<view></view>
						<text>会员加油金-细则</text>
						<i class="iconfont icon-guanbi" style="color: #999999;font-size: 32rpx;" @click="close">
						</i>
					</view>
					<scroll-view scroll-y="true" style="height: 60vh;margin-top: 20rpx;">
						<view class="" style="padding: 10rpx 0;font-size: 28rpx;">
							<rich-text :nodes="memberRichText"></rich-text>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<!-- 服务费-说明 -->
		<uni-popup ref="servicePopup" type="bottom" background-color="#fff">
			<view class="m-detail">
				<view class="w-center">
					<view class="m-detail-title df df-justify-content-between df-align-items">
						<view></view>
						<text>确认订单-服务费细则</text>
						<i class="iconfont icon-guanbi" style="color: #999999;font-size: 32rpx;" @click="close">
						</i>
					</view>
					<view class="" style="padding: 40rpx 0;font-size: 28rpx;">
						<scroll-view scroll-y="true" style="height: 550rpx;">
							<!-- <rich-text :nodes="od.plat_service_rule"></rich-text> -->
							<rich-text :nodes="richText"></rich-text>
						</scroll-view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 随单购注意事项说明 -->
		<uni-popup ref="rulePopup" type="bottom" background-color="#fff">
			<view class="m-detail">
				<view class="w-center">
					<view class="m-detail-title df df-justify-content-between df-align-items">
						<view></view>
						<text>随单购注意事项</text>
						<i class="iconfont icon-guanbi" style="color: #999999;font-size: 32rpx;" @click="close">
						</i>
					</view>
					<view class="" style="padding: 40rpx 0;font-size: 28rpx;">
						<scroll-view scroll-y="true" style="height: 550rpx;">
							<rich-text :nodes="buyRuleText"></rich-text>
						</scroll-view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 优惠券详情 -->
		<uni-popup ref="couDetailPopup" type="bottom" background-color="#fff">
			<view class="m-detail">
				<view class="w-center">
					<view class="m-detail-title df df-justify-content-between df-align-items">
						<!-- <view></view> -->
						<text style="color: #F12F63;">{{detail.coupon.title}}</text>
						<i class="iconfont icon-guanbi" style="color: #999999;font-size: 32rpx;" @click="close">
						</i>
					</view>
					<view class="" style="margin-top: 20rpx;margin-bottom: -10rpx;">
						<view class="" style="font-size: 28rpx;color: #F12F63;">
							{{detail.coupon.intro}}
						</view>
						<view class="df df-justify-content-between">
							<view class=""  style="margin-top: 10rpx;font-size: 38rpx;color: #F12F63;font-weight: bold;">
								￥{{detail.coupon.price}}
							</view>
							<view class="" v-if="detail.coupon.volume !== 0">
								已售{{detail.coupon.volume}}
							</view>
							<view class="" v-else></view>
						</view>
					</view>
					<view class="" style="padding: 40rpx 0;font-size: 28rpx;">
						<scroll-view scroll-y="true" style="height: 550rpx;">
							<view class="coupon-title">
								包含以下优惠券
							</view>
							<view class="" v-for="(item,index) in detail.coupon.nums">
								<view class="coupon-item" @click="selectCoupon(item)">
									<view class="coupon-info">
										<view class="main-part">
											<view class="oil-item-name">
												{{(detail.coupon.amount/detail.coupon.nums)}}元满减券 
											</view>
											<view class="oil-item-text">
												部分合作油站可用 
											</view>
										</view>
									</view>
									<view class="coupon-money">
										<view class="oil-item-data">
											<text>￥</text>
											{{(detail.coupon.amount/detail.coupon.nums)}}
										</view>
										<view class="oil-item-datas">
											<text>(满{{detail.coupon.full}}可用)</text>
										</view>
									</view>
								</view>
							</view>
							<view class="coupon-title" style="margin-top: 20rpx;">
								商品说明
							</view>
							<view class="bottom-content">
								<rich-text :nodes="couText"></rich-text>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 价格说明 -->
		<uni-popup ref="priceRulePopup" type="bottom" background-color="#fff">
			<view class="m-detail">
				<view class="w-center">
					<view class="m-detail-title df df-justify-content-between df-align-items">
						<view></view>
						<text>价格说明</text>
						<i class="iconfont icon-guanbi" style="color: #999999;font-size: 32rpx;" @click="close">
						</i>
					</view>
					<view class="" style="padding: 40rpx 0;font-size: 28rpx;">
						<scroll-view scroll-y="true" style="height: 550rpx;">
							<rich-text :nodes="oilPriceText"></rich-text>
						</scroll-view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 开票说明 -->
		<uni-popup ref="kpPopup" type="bottom" background-color="#fff">
			<view class="m-detail">
				<view class="w-center">
					<view class="m-detail-title df df-justify-content-between df-align-items">
						<view></view>
						<text>开票说明</text>
						<i class="iconfont icon-guanbi" style="color: #999999;font-size: 32rpx;" @click="close">
						</i>
					</view>
					<view class="" style="padding: 40rpx 0;font-size: 28rpx;">
						<scroll-view scroll-y="true" style="height: 550rpx;">
							<rich-text :nodes="kpText"></rich-text>
						</scroll-view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 平台优惠说明 -->
		<uni-popup ref="preferPopup" type="bottom" background-color="#fff">
			<view class="m-detail">
				<view class="w-center">
					<view class="m-detail-title df df-justify-content-between df-align-items">
						<view></view>
						<view class="prefer">{{Number(od.dis_total).toFixed(2)}}
							<text class="prefer-text">合计优惠</text>
						</view>
						<i class="iconfont icon-guanbi" style="color: #999999;font-size: 32rpx;margin-top: -15rpx;"
							@click="close">
						</i>
					</view>
					<view class="" style="padding: 40rpx 0;font-size: 28rpx;">
						<scroll-view scroll-y="true" style="height: 550rpx;">
							<view class="table-prefer">
								<uni-table border type stripe emptyText="暂无更多数据">
									<!-- 表头行 -->
									<uni-tr>
										<uni-th width="60" align="center">优惠区间</uni-th>
										<uni-th width="60" align="center">优惠升数</uni-th>
										<uni-th width="60" align="center">优惠单价</uni-th>
										<uni-th width="60" align="center">优惠金额</uni-th>
									</uni-tr>
									<!-- 表格数据行 -->
									<uni-tr>
										<uni-td>0-{{yx_bit.liters}}L</uni-td>
										<uni-td>约{{od.bitInfo.liters}}L</uni-td>
										<uni-td>-￥{{od.bitInfo.dis_price}}</uni-td>
										<uni-td>-￥{{od.bitInfo.bitDiscount}}</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td>超出{{yx_bit.liters}}L</uni-td>
										<uni-td>约{{od.bitInfo.notEnjoyBitBum}}L</uni-td>
										<uni-td>-￥{{od.bitInfo.extra_dis_price}}</uni-td>
										<uni-td>-￥{{od.bitInfo.notEnjoyBitDiscount}}</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td>油站优惠</uni-td>
										<uni-td>--</uni-td>
										<uni-td>--</uni-td>
										<uni-td>-￥{{od.station_amount}}</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td>累计</uni-td>
										<uni-td>约{{(od.num)}}L</uni-td>
										<uni-td>--</uni-td>
										<uni-td>-￥{{Number(od.dis_total).toFixed(2)}}</uni-td>
									</uni-tr>
								</uni-table>
							</view>
							<view class="prefer-tip">
								<view class="">
									加油优惠：{{od.bitInfo.liters}}L享受此优惠，
									<text
										v-if="od.bitInfo.extra_price !== 0">超出部分享￥{{od.bitInfo.extra_price}}/L优惠</text>
								</view>
								<view class="">
									优惠活动会根据市场油价进行调整，具体金额以各油站为准
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import parseHtml from "@/utils/html-parser.js";
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	import orderTop from '../../../component/orderTop/orderTop.vue';
	//import toastModel from '@/components/toast-model/toastModel.vue';
	import payNotice from '@/components/pay-notice/pay-notice.vue';
	import mApi from '@/api/mine.js';
	import api from '@/api/order.js';
	import hapi from '@/api/home.js';
	import json from "@/json/index";
	export default {
		components: {
			uniPopup,
		//	toastModel,
			orderTop,
			payNotice
		},
		data() {
			return {
				// yhFlag:true,
				jiayou_money: '',
				member_date: '',
				detailed_show: false,
				balanceNums: '',
				form: {
					station_id: '', //加油站id
					oil_id: '', //油号id
					gun_id:0,//油枪id
					gun_name: '枪', //油枪id
					num: '', //加油量
					total: '', //加油金额
					examine_audit_id: 0, //加油金id
					// #ifdef MP-ALIPAY
					pay_way: 2, // 支付宝
					// #endif
					// #ifdef MP-WEIXIN
					pay_way: 1, // 微信
					// #endif
					rebateday:0
				},
				detail: '',
				oil_list: [],
				gun_list: [],
				popupImg: '', //会员加油机弹窗图片
				hid_d: false,
				od: {},
				memberod: {},
				total: '', //加油金额
				showod: false,
				qk_list: [], //快捷金额列表
				params: '',
				kpText: '', //开票说明
				tabs: [{
						id: 0,
						name: '我要加油'
					},
					{
						id: 1,
						name: '车友印象'
					}
				],
				check_index: 0,
				labels: [],
				act: false,
				// f_d: {},
				oil_name: '',
				oil_type_id: '',
				no_input: true,
				temp: '',
				paying: false,
				IMG_URL: "",
				// oil_coupon: {
				// 	id:"",
				// 	price: 0
				// }, // 选中优惠券信息--单张

				oil_coupon: {
					id: [], // 优惠券 id 数组
					price: 0 // 总优惠价格
				}, // 选中优惠券信息--多张

				userinfo: {},
				modelTitle: "", // 提示框标题
				content: "", // 提示框内容
				richText: "", // 服务费-细则
				memberRichText: "", // 会员加油金 - 细则
				randomInfo: {}, // 随机减少信息
				radioVisible: false, // radio
				radioVisible2: false, // radio
				current: 0, // 激活项 index
				memberList: [], // 会员加油金列表
				is_active: '', //判断该加油站是否在做会员加油金活动
				member_info: '', //会员加油金选择
				member_id: 0, //会员加油金id
				member_order_id: '',
				// oilConfig: {}, // 单独购买时的加油金配置
				bannerImage: '', //广告图2
				activeId: '', //活动id
				memberMoney_info: [], //加油金
				memberMoney_info2: [], //加油金
				memberMoney_Detail: [], //默认加油金
				memberMoney_ID: 0, //加油金id
				memberOrder_id: 0, //默认会员加油金id
				activeRichText: '', //活动价规则
				yx_bit: [], //前十升优惠,
				oilPriceText: '', //价格规则
				buyRuleText:'',//随单购注意事项
				couText:'',//优惠券详情
				contentA:'',//10L优惠
				is_register:0,//是否手机注册
				payNoticeItem:0,//支付提示栏
				is_scan:0,//是否是扫码进入
			}
		},
		computed: {
			// tab 数组
			items() {
				if (this.memberList.length === 0) return [];
				return this.memberList.map((item, index) => {
					item.remark = item.name;
					item.intro = parseHtml(item.intro);
					return item.remark;
				});
			}
		},
		created() {
			// this.richText = json['serviceContent'];
		},
		mounted() {
			this.IMG_URL = this.$IMG_URL;

			/* 判断是否登录 */
			// let userinfo = uni.getStorageSync('userinfo');
			// if (userinfo) {
			mApi.getUserInfo().then(res => {
				if (res.code == 1) {
					this.userinfo = res.data;
				};
			});
			// };

			// #ifdef MP-ALIPAY
			// 支付宝小程序关闭页面下拉(默认开启下拉)
			my.setCanPullDown({
				canPullDown: false
			});
			// #endif
		},

		onLoad(option) {
			
			if(option && option.params){
				this.params = JSON.parse(decodeURIComponent(option.params));
			}else{
				//小程序二维码
				let launchOpt = uni.getLaunchOptionsSync();
				
				if (launchOpt.query && launchOpt.query.scene != null) {
					let scene = decodeURIComponent(launchOpt.query.scene);
					let scan_params = this.queryScanParams(scene);
					//console.log(scan_params,'scan_params');
					this.params = {
						id:scan_params[0],
						oil_type_id:scan_params[1],
						oil_id:scan_params[2]
					};
					
					this.is_scan = 1;
				}else{
					this.params = JSON.parse(decodeURIComponent(option.params));
				}
			}
			
			this.form.station_id = this.params.id;
			this.form.oil_id = this.params.oil_id;
			this.form.examine_audit_id = this.memberMoney_ID;
			this.form.promoter_id = uni.getStorageSync('promoter_id');
			this.oil_type_id = this.params.oil_type_id;
			this.oil_name = this.params.oil_name;
			this.form.rebateday = this.params.rebateday;

			this.getQk()
			this.getDetail()
			this.getOilGun()
			this.getStationOil()
			this.getLabel()
			this.getMemberMoney()
			this.getMemberMoneyDetail()
			this.getPopupImgApi()
			uni.hideShareMenu()
			this.getBanner()
			this.getMemberOilList();
			
			let userinfo = uni.getStorageSync('userinfo');
			if (userinfo) {
				this.getjiayoujinApi();
			};

			// 注册一个监听事件，监听从优惠券列表页返回携带的数据
			let _this = this;
			uni.$off('oil_coupon');
			uni.$on('oil_coupon', function(data) {
				_this.oil_coupon = JSON.parse(JSON.stringify(data));
				// console.log(_this.oil_coupon);
				if(_this.oil_coupon.id.length > 0){
					if (Object.keys(_this.od).length > 0) {
						_this.memberMoney_ID = 0;
						_this.member_id = 0;
						_this.form.examine_audit_id = 0;
						_this.radioVisible = false;
						_this.radioVisible2 = false;
						// _this.yhqFlag = true;
						_this.getprice2();
					};
				}
			});

			uni.$off('member_info');
			uni.$on('member_info', function(data) {
				if (data) {
					_this.member_info = JSON.parse(JSON.stringify(data));
					if (_this.member_info.id) {
						_this.member_info = JSON.parse(JSON.stringify(data));
						_this.member_id = _this.member_info.id;
					} else {
						_this.member_info = '';
						_this.member_id = 0;
					}
					_this.memberMoney_ID = 0;
					_this.form.examine_audit_id = 0;
					_this.radioVisible = false;
					_this.radioVisible2 = false;
					_this.oil_coupon.id = []; //不可使用优惠券
					_this.getprice2();
				}
			});

			uni.$off('memberMoney_info');
			uni.$on('memberMoney_info', function(data) {
				if (data) {
					_this.memberMoney_info = JSON.parse(JSON.stringify(data));
					// console.log(_this.memberMoney_info2, "不选择返回");
					if (_this.memberMoney_info.id) {
						_this.memberMoney_ID = _this.memberMoney_info.id;
					} else {
						_this.memberMoney_ID = 0;
					}
					// console.log(_this.memberMoney_ID, "ddddd");
					_this.form.examine_audit_id = _this.memberMoney_info.id;
					_this.member_id = 0;
					_this.radioVisible = false;
					_this.radioVisible2 = false;
					_this.oil_coupon.id = []; //不可使用优惠券
					_this.getprice2();
				}
			});
		},
		onUnload() {
			uni.$off('oil_coupon');
			uni.$off('member_info');
			uni.$off('memberMoney_info');
		},
		methods: {
			queryScanParams:function(query){
				
				 // 将查询字符串按 & 分割
				 let pairs = query.split("s");
				 
				 return pairs;
			},
			checkedCoupon(){
				// console.log(111);
				this.radioVisible2 = !this.radioVisible2
				this.radioVisible = false
				this.randomInfo = {};
				this.memberMoney_ID = 0;
				this.member_id = 0;
				this.getprice();
			},
			toRule(){
				this.$refs.rulePopup.open()
			},
			couDetailPopup(){
				this.$refs.couDetailPopup.open()
			},
			memberOilPopup() {
				this.$refs.memberOilPopup.open()
			},
			servicePopup() {
				this.$refs.servicePopup.open()
			},
			priceRulePopup() {
				this.$refs.priceRulePopup.open();
			},
			kpPopup() {
				this.$refs.kpPopup.open();
			},
			preferPopup() {
				this.$refs.preferPopup.open()
			},
			yhmx() {
				this.$refs.totalDetail_show.open();
				this.$refs.preferPopup.close();
			},	
			getMemberMoney() {
				let data = {
					token: uni.getStorageSync('userinfo').token,
					station_id: this.form.station_id
				};
				let _this = this;
				api.getInsOilMoney(data).then(res => {
					// this.memberMoney_info = res.data.data[0]
					this.memberMoney_info2 = res.data
					this.memberMoney_ID = 0;
					// this.getImageInfo(image, 0)
					// this.setBannerBackground(255, 140, 40);
				})
			},
			getMemberMoneyDetail() {
				let data = {
					token: uni.getStorageSync('userinfo').token,
					station_id: this.form.station_id
				};
				let _this = this;
				mApi.getMemberMoney(data).then(res => {
					if(res.data){
						this.memberMoney_Detail = res.data.data[0]
						// console.log(this.memberMoney_Detail, "这是第一条加油金数据");
						this.memberMoney_ID = 0;
					}
					// this.getImageInfo(image, 0)
					// this.setBannerBackground(255, 140, 40);
				})
			},
			getBanner() {
				hapi.getBanner({
					platform: 0,
					position: 5
				}).then(res => {
					this.banner = res.data;
					this.bannerImage = this.IMG_URL + this.banner[0].image
					this.activeId = this.banner[0].action_value
					// this.getImageInfo(image, 0)
					// this.setBannerBackground(255, 140, 40);
				})
			},
			getPopupImgApi() {
				hapi.getBanner({
					platform: 0,
					position: 2
				}).then(res => {
					try {
						this.popupImg = res.data[0].image;
					} catch (e) {
						this.popupImg = '';
					}
				})
			},

			close() {
				this.$refs.couDetailPopup.close()
				this.$refs.oil_show.close();
				this.$refs.totalDetail_show.close();
				this.$refs.random.close();
				this.$refs.memberOilPopup.close();
				this.$refs.servicePopup.close();
				this.$refs.priceRulePopup.close();
				this.$refs.kpPopup.close();
				this.$refs.preferPopup.close();
				this.$refs.rulePopup.close();
			},
			getLabel() {
				hapi.getLabel({
					station_id: this.params.id
				}).then(res => {
					if (res.code == 1) {
						this.labels = res.data;
					}
				})
			},
			//切换
			checkTab(val) {
				this.check_index = val.id
			},
			collect(detai) {
				hapi.isCollect({
					station_id: detai.id, //油站id
					price: detai.price, //单价
					oil_type_id: this.params.oil_type_id
				}).then(res => {
					if (res.code == 1) {
						if(res.msg === '收藏成功'){
							this.detail.is_collect = 1
						}else{
							this.detail.is_collect = 0
						}
						uni.showToast({
							title: res.msg,
							duration: 1000
						})
					}
				})
			},
			//获取快捷金额
			getQk() {
				api.getQuick({
					station_id: this.params.id,
					oil_id: this.form.oil_id,
					gun_id:this.form.gun_id
				}).then(res => {
					if (res.code == 1) {
						this.qk_list = res.data;
					}
				})
			},
			// 加油金额输入
			valueChange(e) {
				let _this = this;
				// e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				e.target.value = e.target.value.replace(/(^\s*)|(\s*$)/g, "");
				const reg = /[^\d.]/g;

				// 只能是数字和小数点，不能是其他输入
				e.target.value = e.target.value.replace(reg, "");

				// 保证第一位只能是数字，不能是点
				e.target.value = e.target.value.replace(/^\./g, "");
				// 小数只能出现1位
				e.target.value = e.target.value
					.replace(".", "$#$")
					.replace(/\./g, "")
					.replace("$#$", ".");
				// 小数点后面保留2位
				e.target.value = e.target.value.replace(
					/^(\-)*(\d+)\.(\d\d).*$/,
					"$1$2.$3"
				);
				this.$nextTick(() => {
					_this.form.total = e.target.value
					_this.randomInfo = {}
				})
				// this.fomr.total = e.target.value
			},
			// 选择加油金额
			selQk(item) {
				// this.f_d = item;
				if (this.form.gun_name == '枪') {
					this.temp = item.amount
					this.$refs.oil_show.open()
				} else {
					this.act = true
					this.form.total = item.amount
					this.randomInfo = {}
					this.getprice()
				}
			},
			getprice2() {
				const clone = JSON.parse(JSON.stringify(this.form))
				if (this.form.total == '') {
					return
				} else {
					let params = {
						total: this.form.total,
						station_id: this.form.station_id,
						oil_id: this.form.oil_id,
						gun_id:this.form.gun_id,
						user_coupon_id: this.oil_coupon.id,
						member_order_id: this.member_id || this.member_order_id,
						examine_audit_id: this.memberMoney_ID,
					};
					// 会员加油金查询
					if (this.radioVisible) {
						params.mouth_card_id = this.memberList[this.current].id;
					} else {
						delete params.mouth_card_id;
					};
					// 随单购优惠券查询
					if (this.radioVisible2) {
						params.coupon_id = this.detail.coupon.id;
					} else {
						delete params.coupon_id;
					};
					api.getprice(params).then(res => {
						// console.log(res.code);
						if (res.code == 1) {
							// console.log(this.member_id, "此时选择的会员加油金");
							// console.log(this.memberMoney_ID, "此时选择的加油金");
							// console.log(this.oil_coupon.id, "此时选择的优惠券");
							this.showod = true
							this.od = res.data;
							let richText = res.data.plat_service_rule.replace(
									/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
								// .replace(/<p>/ig, '<p style="font-size: 15Px; line-height: 25Px;">')
								.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
								.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
								.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
								.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
								.replace(/<img([\s\w"-=\/\.:;]+)/ig,
									'<img$1 style="width: 100%;object-fit: contain;"')
							/* 处理支付宝小程序富文本显示问题 */
							this.richText = parseHtml(richText);
							this.form.num = res.data.num;
						} else if (res.code == 0) {
							if (this.radioVisible) {
								this.radioVisible = false;
								this.getprice();
							};
						};
					});
					// if (this.form.total < 20) {
					// 	uni.showToast({
					// 		title: '加油金额不能小于20元',
					// 		icon: 'none',
					// 		duration: 1000
					// 	});
					// 	return;
					// }
				}

			},
			// 输入框失焦--获取加油金额信息
			getprice() {
				const clone = JSON.parse(JSON.stringify(this.form))
				if (this.form.total == '') {
					return
				} else {
					if (this.radioVisible == false && this.radioVisible2 == false) {
						if (this.memberList && this.memberMoney_info2.balanceNums !== 0 && this.memberMoney_Detail
							.balanceNums !== 0 && this.detail.oilcouponNum > 0 && this
							.memberMoney_ID == 0 && this.member_id == 0 && this.oil_coupon.id.length == 0 && this.balanceNums !== 0) {
							this.memberMoney_ID = this.memberMoney_Detail.id;
							this.form.examine_audit_id = this.memberMoney_ID;
							// console.log("三个都拥有", this.oil_coupon);
						} else if (this.memberList && this.memberMoney_info2.balanceNums !== 0 && this
							.memberMoney_Detail
							.balanceNums !== 0 && this.memberMoney_ID == 0 && this
							.member_id == 0 && this.oil_coupon.id.length == 0 && this.balanceNums !== 0) {
							//拥有加油金和会员加油金 取加油金
							this.memberMoney_ID = this.memberMoney_Detail.id;
							this.form.examine_audit_id = this.memberMoney_ID;
							// console.log("拥有加油金和会员加油金");
						} else if (this.memberMoney_info2.balanceNums !== 0 && this.memberMoney_Detail.balanceNums !==
							0 &&
							this.detail.oilcouponNum > 0 && this.memberMoney_ID == 0 &&
							this.member_id == 0 && this.oil_coupon.id.length == 0) {
							//拥有加油金和优惠券 取加油金
							this.memberMoney_ID = this.memberMoney_Detail.id;
							this.form.examine_audit_id = this.memberMoney_ID;
							// console.log("拥有加油金和优惠券");
						} else if (this.memberList && this.detail.oilcouponNum > 0 && this.member_id == 0 && this
							.memberMoney_ID == 0 && this.oil_coupon.id.length == 0 && this.balanceNums !== 0) {
							//拥有会员加油金和优惠券 取会员加油金
							this.member_id = this.memberOrder_id
							// console.log("拥有会员加油金和优惠券");
						} else if (this.memberList && this.member_id == 0 && this.memberMoney_ID == 0 && this
							.oil_coupon.id
							.length == 0 && this.balanceNums !== 0) {
							// console.log(this.memberList);
							this.member_id = this.memberOrder_id
							// console.log(this.member_id, "只有会员加油金");
						} else if (this.memberMoney_info2.balanceNums !== 0 && this.memberMoney_ID == 0 && this
							.memberMoney_Detail.balanceNums !== 0 && this.member_id == 0 && this
							.oil_coupon.id.length == 0) {
							this.memberMoney_ID = this.memberMoney_Detail.id;
							this.form.examine_audit_id = this.memberMoney_ID;
							// console.log(this.memberMoney_ID, "只有加油金");
						}
					} else {
						this.oil_coupon.id = [];
						this.oil_coupon.price = 0;
						this.memberMoney_ID = 0;
						this.member_id = 0
					}
					let params = {
						total: this.form.total,
						station_id: this.form.station_id,
						oil_id: this.form.oil_id,
						gun_id:this.form.gun_id,
						user_coupon_id: this.oil_coupon.id,
						// coupon_id
						member_order_id: this.member_id || this.member_order_id,
						examine_audit_id: this.memberMoney_ID,
					};
					// 会员加油金查询
					if (this.radioVisible) {
						params.mouth_card_id = this.memberList[this.current].id;
					} else {
						delete params.mouth_card_id;
					};
					// 随单购优惠券查询
					if (this.radioVisible2) {
						params.coupon_id = this.detail.coupon.id;
					} else {
						delete params.coupon_id;
					};
					if(this.oil_coupon.price !== 0){
						if(this.oil_coupon.type[0]*1 === 4){
							if(this.form.total < this.oil_coupon.full[0]*1){
								this.oil_coupon.id = [];
								this.oil_coupon.price = 0;
								this.getprice2();
							}
						}
					};
					api.getprice(params).then(res => {
						if (res.code == 1) {
							// console.log(this.member_id, "此时选择的会员加油金");
							// console.log(this.memberMoney_ID, "此时选择的加油金");
							// console.log(this.oil_coupon.id, "此时选择的优惠券");
							this.showod = true
							this.od = res.data;
							this.form.num = res.data.num;
							let richText = res.data.plat_service_rule.replace(
									/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
								// .replace(/<p>/ig, '<p style="font-size: 15Px; line-height: 25Px;">')
								.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
								.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
								.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
								.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
								.replace(/<img([\s\w"-=\/\.:;]+)/ig,
									'<img$1 style="width: 100%;object-fit: contain;"')
							/* 处理支付宝小程序富文本显示问题 */
							this.richText = parseHtml(richText);
						} else if (res.code == 0) {
							if (this.radioVisible) {
								this.radioVisible = false;
								this.getprice();
							};
						};
					});
					// }
					// if (this.form.total < 20) {
					// 	uni.showToast({
					// 		title: '加油金额不能小于20元',
					// 		icon: 'none',
					// 		duration: 1000
					// 	});
					// 	return;
					// }
				}
			},
			checkState(e) {
				this.hid_d = e.show
				// console.log(e)
			},
			closeAmount() {
				// this.f_d = ''
				// console.log(this.f_d)
			},
			// 油号、枪号选择（打开popup）
			closeProp() {
				// this.form.total = this.f_d.amount
				if (this.form.gun_name === '枪') {
					// this.act = false
					// this.no_input = true;
					this.$refs.oil_show.open()
				} else {
					// this.form.total = this.f_d.amount
					if (this.temp > 0) {
						this.form.total = this.temp
						this.temp = ''
					}
					this.act = true
					this.no_input = false
					this.getprice()
					this.$refs.oil_show.close()
				}

			},
			closeProp2() {
				this.$refs.detail_show.close()
			},
			// 获取加油枪 list
			getOilGun() {
				hapi.getOilGun({
					station_id: this.params.id,
					oil_id: this.form.oil_id
				}).then(res => {
					if (res.code == 1) {
						// console.log(res.data,"油枪");
						this.gun_list = res.data;

					} else {
						this.form.gun_name = '枪'
						this.gun_list = []
					}
				})
			},
			//选择油号
			checkOilType(item) {
				// console.log(item, 'iy')
				this.form.oil_id = item.id
				this.oil_name = item.name
				// console.log(this.oil_name, item.name)
				this.oil_type_id = item.oil_type_id
				// this.gun_list = []
				this.getOilGun()
				this.getDetail()
			},
			//选择加油枪
			selGun(item) {
				console.log(item,'选择加油枪');
				this.form.gun_name = item.name;
				this.form.gun_id = item.id
			},
			showDetail() {
				this.$refs.detail_show.open()
			},
			openOil() {
				this.$refs.oil_show.open();
			},
			// 会员支付
			goVipPay() {
				let space = ''
				if (this.detail.distance.includes('km')) {
					space = this.detail.distance.replace('km', '')
					space = space * 1000
				} else {
					space = this.detail.distance.replace('m', '')
				}
				if (space > 2000) {
					this.modelTitle = this.detail.name;
					this.content = "您支付的不是当前加油站，付款后可能无法退回，是否继续支付？";
					this.$refs.toastModel.open();
					uni.showToast({
						title: '您支付的不是当前加油站，付款后可能无法退回，是否继续支付？',
						icon: 'none',
						duration: 2000
					});
					return false;
				}

				this.form.user_coupon_id = this.oil_coupon.id; // 优惠券信息
				this.form.member_order_id = this.member_id || this.member_order_id;
				this.form.examine_audit_id = this.memberMoney_ID;
				if (this.radioVisible) {
					this.form.mouth_card_id = this.memberList[this.current].id; // 会员加油金
				} else {
					delete this.form.mouth_card_id;
				};
				// 随单购优惠券查询
				if (this.radioVisible2) {
					this.form.coupon_id = this.detail.coupon.id;
				} else {
					delete this.form.coupon_id;
				};
				// };
				/*
				 * 区分支付方式
				 * pay_way : 1、2   1=微信  2=支付宝
				 */
				// #ifdef MP-ALIPAY
				this.form.pay_way = 2;
				// #endif
				// #ifdef MP-WEIXIN
				this.form.pay_way = 1;
				// #endif
				let clone = JSON.parse(JSON.stringify(this.form));
				if (clone.num == '') {
					uni.showToast({
						title: '请输入加油金额！',
						icon: 'none',
						duration: 1000
					})
					return;
				}

				// if(Number(this.memberList[this.current].oilprice) === 0){
				// 	clone.gun_name = this.gun_list[0].name
				// 	clone.total = 0
				// }
				/* 有订单数据就拿本地的，没有从后端拿 */

				api.addOrder(clone).then(res => {
					if (res.code == 1) {
						this.randomInfo = res.data;
						this.wxPay()
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});

					}
				})
			},

			// 支付
			toPay() {
				let space = ''
				if (this.detail.distance.includes('km')) {
					space = this.detail.distance.replace('km', '')
					space = space * 1000
				} else {
					space = this.detail.distance.replace('m', '')
				}
				
				this.is_register = uni.getStorageSync('is_register');
				let is_hide = 0;
				if(uni.getStorageSync('is_hide')){
					is_hide =  uni.getStorageSync('is_hide');
					
				}
				
				if(this.is_register==0 && is_hide==0){
					this.payNoticeItem = 3;
					this.modelTitle = '绑定手机号提示';
					this.content = "当订单有疑问时，为了方便油站员工联系到您，建议您绑定手机号";
					this.$refs.payNotice.open();
					return false;
				}
				
				if(this.is_scan==1){
					//扫码进入不限制支付距离
					space = 0;
				}
				
				if(space<3000 && space>500){
					this.payNoticeItem = 1;
					this.modelTitle = this.detail.name;
					this.content = "你距离当前加油站较远，请到加油站与加油员确认金额后支付！";
					this.$refs.payNotice.open();
					return false;
				}
				
				if(space>=3000){
					this.payNoticeItem = 2;
					this.spaceType = false;
					this.modelTitle = this.detail.name;
					this.modellat =  this.detail.lat;
					this.modellng =  this.detail.lng;
					this.modelStatation =  this.detail.name;
					this.modeladdress =  this.detail.address;
					this.content = "你距离当前加油站较远，请到加油站与加油员确认金额后支付！";
					this.$refs.payNotice.open();
					return false;
				}

				this.form.user_coupon_id = this.oil_coupon.id; // 优惠券信息
				if (this.radioVisible) {
					this.form.mouth_card_id = this.memberList[this.current].id; // 会员加油金
				} else {
					delete this.form.mouth_card_id;
				};
				// 随单购优惠券查询
				if (this.radioVisible2) {
					this.form.coupon_id = this.detail.coupon.id;
				} else {
					delete this.form.coupon_id;
				};
				/*
				 * 区分支付方式
				 * pay_way : 1、2   1=微信  2=支付宝
				 */
				// #ifdef MP-ALIPAY
				this.form.pay_way = 2;
				// #endif
				// #ifdef MP-WEIXIN
				this.form.pay_way = 1;
				// #endif
				let clone = JSON.parse(JSON.stringify(this.form));
				if (clone.num == '') {
					uni.showToast({
						title: '请输入加油金额！',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				// if(Number(this.memberList[this.current].oilprice) === 0){
				// 	clone.gun_name = this.gun_list[0].name
				// 	clone.total = 0
				// }
				this.paying = true;
				// 创建订单
				if (this.detail && this.detail.province_id * 1 === 330000 && this.popupImg != '' && this.oil_coupon.id ==
					'') {
					this.$refs.memberPopup.open()
					let params = {
						total: this.form.total,
						station_id: this.form.station_id,
						oil_id: this.form.oil_id,
						gun_id:this.form.gun_id,
						user_coupon_id: this.oil_coupon.id,
						// coupon_id
						coupon_id:this.from.coupon_id,
						mouth_card_id: this.memberList[0].id,
						examine_audit_id: this.memberMoney_ID,
					};
					api.getprice(params).then(res => {
						if (res.code == 1) {
							this.memberod = res.data;
						} else if (res.code == 0) {
							if (this.radioVisible) {
								this.radioVisible = false;
								this.getprice();
							};
						};
					});
				} else {
					/* 有订单数据就拿本地的，没有从后端拿 */
					if (this.randomInfo.order_id) {
						this.paying = false;
						if (this.randomInfo.rand_coupon_amount >= 10) {
							this.$refs.random.open();
						} else {
							this.wxPay();
						}
						return;
					};
					api.addOrder(clone).then(res => {
						if (res.code == 1) {
							/* 
							 *  随机立减弹框
							 */
							this.paying = false;
							this.randomInfo = res.data;
							if (this.randomInfo.rand_coupon_amount >= 10) {
								this.$refs.random.open();
							} else {
								this.wxPay()
							}
						} else {
							uni.hideLoading();
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1000
							});
							this.paying = false;
						}
					})
				}
			},

			// 确认购买加油金弹框
			clickMemberPay() {
				this.$refs.memberPopup.close()
				this.current = 0
				this.radioVisible = true
				this.getprice()
				this.form.user_coupon_id = this.oil_coupon.id; // 优惠券信息
				if (this.radioVisible) {
					this.form.mouth_card_id = this.memberList[this.current].id; // 会员加油金
				} else {
					delete this.form.mouth_card_id;
				};
				// 随单购优惠券查询
				if (this.radioVisible2) {
					this.form.coupon_id = this.detail.coupon.id;
				} else {
					delete this.form.coupon_id;
				};
				let clone = JSON.parse(JSON.stringify(this.form));
				if (clone.num == '') {
					uni.showToast({
						title: '请输入加油金额！',
						icon: 'none',
						duration: 1000
					})
					return;
				}

				api.addOrder(clone).then(res => {
					if (res.code == 1) {
						this.randomInfo = res.data;
						this.wxPay()
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});

					}
				})
			},

			// 关闭加油金购买弹框
			closeBtn() {
				this.$refs.memberPopup.close()
				this.radioVisible = false
				this.getprice()
				this.form.user_coupon_id = this.oil_coupon.id; // 优惠券信息
				if (this.radioVisible) {
					this.form.mouth_card_id = this.memberList[this.current].id; // 会员加油金
				} else {
					delete this.form.mouth_card_id;
				};
				// 随单购优惠券查询
				if (this.radioVisible2) {
					this.form.coupon_id = this.detail.coupon.id;
				} else {
					delete this.form.coupon_id;
				};
				// };
				let clone = JSON.parse(JSON.stringify(this.form));
				this.paying = true;
				/* 有订单数据就拿本地的，没有从后端拿 */
				if (this.randomInfo.order_id) {
					this.paying = false;
					this.$refs.random.open();
					return;
				};
				api.addOrder(clone).then(res => {
					if (res.code == 1) {
						/* 
						 *  随机立减弹框
						 */
						this.paying = false;
						this.randomInfo = res.data;
						this.$refs.random.open();

					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});
						this.paying = false;
					}
				})
			},
			// getComman(){
			// 	hapi.getComman({
			// 		alias:'oil_price_info'
			// 	}).then(res => {
			// 		if (res.code == 1) {
			// 			console.log(res.data);
			// 		}
			// 	})
			// },
			// 详情
			getDetail() {
				let _this = this;
				let address = uni.getStorageSync('address')
				uni.showLoading({
					title: '加载中…'
				});
				hapi.getStationDetail({
					id: _this.params.id,
					oil_type_id: _this.oil_type_id,
					lng: address.longitude,
					lat: address.latitude
				}).then(res => {
					//console.log(res,7777777777)
					if (res.code == 1) {
						_this.oil_num = res.data.oil_name
						_this.detail = res.data;
						if (res.data.yx_bit) {
							_this.yx_bit = res.data.yx_bit;
							var str = this.yx_bit.content;
							let list = [{
									type: '{1}',
									value: _this.yx_bit.oilmoney
								},
								{
									type: '{2}',
									value: _this.yx_bit.liters
								},
								{
									type: '{3}',
									value: _this.yx_bit.pay_price
								},
								{
									type: '{4}',
									value: _this.yx_bit.liters
								},
								{
									type: '{5}',
									value: _this.yx_bit.extra_price
								},
								{
									type: '{6}',
									value: _this.yx_bit.oilmoney
								},
								{
									type: '{7}',
									value: _this.yx_bit.extra_price
								},
							]
							// return this.handleData1(str, list)
							// console.log(111);
							if(str && list){
								list.forEach(v => {
									//找出指定字符[x][y][z]出现的下标
									let index = str.indexOf(v.type)
									// console.log(index);
									if (index != -1) {
										//截取出[x]前+替换文字+截取[x]后面 =>拼成需要的结果
										str = str.substring(0, index) + v.value + str.substring(index + 3);
										// console.log(str,"111");
										_this.contentA = str
									}
								})
								// return str
								// this.str = str
							}
						}
						// #ifdef MP-WEIXIN
						
						_this.oilPriceText = res.data.agree[0].content;
						_this.couText = res.data.coupon.content;
						_this.buyRuleText = res.data.agree[2].content;
						_this.kpText = res.data.agree[1].content;
						
						 // #endif
						 
						  // #ifdef MP-ALIPAY
						// 优惠券详情
						let couText = res.data.coupon.content;
						/* 处理支付宝小程序富文本显示问题 */
						_this.couText = parseHtml(couText);
						// 随单购注意事项
						let buyRuleText = res.data.agree[2].content;
						/* 处理支付宝小程序富文本显示问题 */
						_this.buyRuleText = parseHtml(buyRuleText);
						let kpText = res.data.agree[1].content;
						/* 处理支付宝小程序富文本显示问题 */
						_this.kpText = parseHtml(kpText);
						let oilPriceText = res.data.agree[0].content;
						/* 处理支付宝小程序富文本显示问题 */
						_this.oilPriceText = parseHtml(oilPriceText);
						console.log(_this.oilPriceText);
						// #endif
						
						_this.o_index = res.data.oil_id;
					}
					this.getStationOil();
					this.getOilGun();
					// this.getComman();
					// 获取会员加油金列表
					this.getMemberOilList();
					let userinfo = uni.getStorageSync('userinfo');
					if (userinfo) {
						this.getjiayoujinApi();
					};
					setTimeout(() => {
						this.getprice();
					}, 300);
					uni.hideLoading();
				}).catch(() => {
					uni.hideLoading()
				})
			},
			getStationOil(){
				// 获取油号 list
				hapi.getStationOil({
					station_id: this.params.id
				}).then(rs => {
					// console.log(rs.data,"油枪油号");
					this.oil_list = rs.data
				})
			},
			// 导航
			toMap(item) {
				uni.openLocation({
					latitude: Number(item.lat),
					longitude: Number(item.lng),
					name: item.name,
					address: item.address,
					success: function() {
						// console.log('success');
					},
					fail: function(res) {
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
												// console.log('确定');
											}
										})
									} else {
										// console.log('取消');
										return false;
									}
								}
							})
						}
					}
				});
			},
			// 查看加油金 -- 跳转加油金列表
			seeOilMoney() {
				this.$navigateTo('/pages_order/pages/order/member-money/member?station_id=' + this.form.station_id);
			},
			// 选择会员加油金
			selectMember(id) {
				this.$navigateTo('/pages/mine/member/member?id=' + id);
			},
			// 自定义弹窗 确认
			modelConfirm() {
				if (!this.paying && Number(this.od.monthoil_money) === 0) {
					this.form.user_coupon_id = this.oil_coupon.id; // 优惠券信息
					if (this.radioVisible) {
						this.form.mouth_card_id = this.memberList[this.current].id; // 会员加油金
					} else {
						delete this.form.mouth_card_id;
					};
					// 随单购优惠券查询
					if (this.radioVisible2) {
						this.form.coupon_id = this.detail.coupon.id;
					} else {
						delete this.form.coupon_id;
					};
					/*
					 * 区分支付方式
					 * pay_way : 1、2   1=微信  2=支付宝
					 */
					// #ifdef MP-ALIPAY
					this.form.pay_way = 2;
					// #endif
					// #ifdef MP-WEIXIN
					this.form.pay_way = 1;
					// #endif
					let clone = JSON.parse(JSON.stringify(this.form));
					if (clone.num == '') {
						uni.showToast({
							title: '请输入加油金额！',
							icon: 'none',
							duration: 1000
						})
						return;
					}
					// if(Number(this.memberList[this.current].oilprice) === 0){
					// 	clone.gun_name = this.gun_list[0].name
					// 	clone.total = 0
					// }
					this.paying = true;
					// 创建订单
					if (this.detail && this.detail.province_id * 1 === 330000 && this.popupImg != '' && this.oil_coupon
						.id == '') {
						this.$refs.memberPopup.open()
						let params = {
							total: this.form.total,
							station_id: this.form.station_id,
							oil_id: this.form.oil_id,
							gun_id:this.form.gun_id,
							user_coupon_id: this.oil_coupon.id,
							// coupon_id
							coupon_id:this.from.coupon_id,
							mouth_card_id: this.memberList[0].id
						};

						api.getprice(params).then(res => {
							if (res.code == 1) {

								this.memberod = res.data;

							} else if (res.code == 0) {
								if (this.radioVisible) {
									this.radioVisible = false;
									this.getprice();
								};
							};
						});
					} else {
						/* 有订单数据就拿本地的，没有从后端拿 */
						if (this.randomInfo.order_id) {
							this.paying = false;
							if (this.randomInfo.rand_coupon_amount >= 10) {
								this.$refs.random.open();
							} else {
								this.wxPay()
							}
							return;
						};
						api.addOrder(clone).then(res => {
							if (res.code == 1) {
								/* 
								 *  随机立减弹框
								 */
								this.paying = false;
								this.randomInfo = res.data;
								if (this.randomInfo.rand_coupon_amount >= 10) {
									this.$refs.random.open();
								} else {
									this.wxPay()
								}
							} else {
								uni.hideLoading();
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1000
								});
								this.paying = false;
							}
						})
					}
				} else {
					this.form.user_coupon_id = this.oil_coupon.id; // 优惠券信息
					this.form.member_order_id = this.member_id || this.member_order_id
					if (this.radioVisible) {
						this.form.mouth_card_id = this.memberList[this.current].id; // 会员加油金
					} else {
						delete this.form.mouth_card_id;
					};
					/*
					 * 区分支付方式
					 * pay_way : 1、2   1=微信  2=支付宝
					 */
					// #ifdef MP-ALIPAY
					this.form.pay_way = 2;
					// #endif
					// #ifdef MP-WEIXIN
					this.form.pay_way = 1;
					// #endif
					let clone = JSON.parse(JSON.stringify(this.form));
					if (clone.num == '') {
						uni.showToast({
							title: '请输入加油金额！',
							icon: 'none',
							duration: 1000
						})
						return;
					}
					api.addOrder(clone).then(res => {
						if (res.code == 1) {
							this.randomInfo = res.data;
							this.wxPay()
						} else {
							uni.hideLoading();
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1000
							});
						}
					})
				}
			},
			// 立即支付
			wxPay() {
				let that = this;
				uni.showLoading({
					title: '请稍等',
					mask: true
				});
				const orderId = this.randomInfo.order_id;

				// 获取微信支付参数
				api.Pay({
					// order_id: res.data.order_id,
					order_id: orderId,
				}).then(rs => {
					if (rs.code == 1) {
						uni.showToast({
							title: rs.msg,
							icon: 'none',
							duration: 1000
						});
						// #ifdef MP-WEIXIN
						// 拉起微信支付
						uni.requestPayment({
							// ...rs.data.miniPayRequest,   // 银联
							...JSON.parse(rs.data.prePayTn), // 易宝
							provider: 'weixn',
							// orderInfo: res.data.order_id,
							orderInfo: orderId,
							success: () => {
								that.randomInfo = {};
								uni.hideLoading();
								if (this.current == 0 && this.radioVisible) {
									uni.navigateTo({
										url: '/pages/mine/shipAddress/index'
									})
								}
								uni.navigateTo({
									//url: '/pages/order/index',
									url: '/pages_order/pages/order/order-detail/order-detail?id='+orderId+'&state=1'
								});
								
								if(this.is_register==0){
									uni.setStorage({ key: 'is_hide',data:0	})
								}
							},
							complete: () => {
								if(this.is_register==0){
									uni.setStorage({ key: 'is_hide',data:0	})
								}
								that.$refs.random.close();
							},
							fail: () => {
								uni.hideLoading();
								that.paying = false;
							}
						});
						// #endif

						// #ifdef MP-ALIPAY
						// 拉起支付宝支付
						my.tradePay({
							// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
							tradeNO: rs.data.prePayTn,
							success: (res) => {
								uni.hideLoading();
								if (res.resultCode == '6001') {
									that.paying = false;
									return;
								};
								that.randomInfo = {};
								if (that.current == 0 && that.radioVisible) {
									uni.navigateTo({
										url: '/pages/mine/shipAddress/index'
									})
								} else {
									uni.switchTab({
										url: '/pages/order/index'
									});
								}
							},
							complete: () => {
								that.$refs.random.close();
							},
							fail: (res) => {
								uni.hideLoading();
								that.paying = false;
							}
						});
						// #endif
					} else if (rs.code == 101) {
						// 优惠券抵消后支付0元
						uni.showToast({
							title: rs.msg,
							icon: 'none',
							duration: 1000
						});
						uni.hideLoading();
						uni.switchTab({
							url: '/pages/order/index'
						});
					};
				});
			},
			// 勾选/取消 会员加油金套餐
			checkedSetMeal() {
				if(this.detail && this.detail.province_id*1 !== 330000){
					this.radioVisible = !this.radioVisible;
					this.radioVisible2 = false;
					this.randomInfo = {};
					this.memberMoney_ID = 0;
					this.member_id = 0;
					this.getprice();
				}
			},
			// 获取会员加油金列表
			getMemberOilList() {
				console.log(66666);
				api.listMemberOilMoney({
					province_id: this.params.province_id,
					station_id: this.params.id,
				}).then(res => {
					this.memberList = res.data.list;
					let memberRichText = res.data.notice;
					/* 处理支付宝小程序富文本显示问题 */
					this.memberRichText = parseHtml(memberRichText);
				});
			},
			// 获取 单独购买 加油金配置
			// getOilConfig() {
			// 	api.listMemberOilMoney({
			// 		station_id: this.detail?.id,
			// 		place: 3
			// 	}).then(res => {
			// 		let [first] = res.data.list;
			// 		if (first) {
			// 			this.oilConfig = first;
			// 		};
			// 	});
			// },
			// 查看会员加油金规则
			checkRule() {
				this.$refs.memberPopup.close();
				this.$refs.memberOilPopup.open();
				this.paying = false;
			},
			// 个人会员加油金信息
			getjiayoujinApi() {
				api.getjiayoujin({
					province_id: this.params.province_id,
					station_id: this.params.id,
				}).then(res => {
					if (res.code == 1) {
						// console.log(res.data, "会员加油金信息");
						this.jiayou_money = res.data.money;
						this.is_active = res.data.is_active;
						this.memberOrder_id = res.data.member_order_id;
						// this.member_order_id = res.data.member_order_id;
						this.member_order_id = 0;
						this.member_date = res.data.expires_time;
						this.balanceNums = res.data.balanceNums;
					} else {
						this.jiayou_money = "0.00";
					}
				})
			},
			// 切换tabs
			onClickItem({
				currentIndex
			}) {
				this.current = currentIndex;
				if (this.radioVisible) {
					this.getprice();
				};
			},
			// 单独购买  TODO
			aloneBuyOil() {
				let payFrom = {
					id: this.memberList[this.current].id,
					place: this.memberList[this.current].place,
					station_id:this.detail.id,
					// #ifdef MP-ALIPAY
					pay_way: 2, // 支付宝
					// #endif
					// #ifndef MP-ALIPAY
					pay_way: 1, // 微信
					// #endif
				};
				api.crateMemberOrder(payFrom).then(res => {
					if (res.code == 1) {
						// 支付
						this.appletsPay({
							order_id: res.data.order_id,
							success: (res) => {
								this.paying = false;
								// #ifdef MP-ALIPAY
								if (res.resultCode == '6001') return;
								// #endif
								uni.showToast({
									title: "支付成功!",
									icon: 'none',
									duration: 1000
								});
								uni.redirectTo({
									url: '/pages/mine/member/member'
								});
							},
							fail: () => {
								uni.hideLoading();
								this.paying = false;
							},
						});
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});
					};
				});
			},
			// 封装 小程序支付
			appletsPay({
				order_id,
				success,
				fail,
			}) {
				let that = this;
				uni.showLoading({
					title: '请稍等',
					mask: true
				});
				// 获取微信支付参数
				api.memberPay({
					member_order_id: order_id,
				}).then(rs => {
					if (rs.code == 1) {
						uni.showToast({
							title: rs.msg,
							icon: 'none',
							duration: 1000
						});
						// #ifdef MP-WEIXIN
						// 拉起微信支付
						uni.requestPayment({
							// ...rs.data.miniPayRequest,   // 银联
							...JSON.parse(rs.data.prePayTn), // 易宝
							provider: 'weixn',
							orderInfo: order_id,
							success: () => {
								success();
							},
							complete: () => {
								uni.hideLoading();
							},
							fail: () => {
								fail();
							}
						});
						// #endif
						// #ifdef MP-ALIPAY
						// 拉起支付宝支付
						my.tradePay({
							// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
							tradeNO: rs.data.prePayTn,
							success: (res) => {
								success(res);
							},
							complete: () => {
								uni.hideLoading();
							},
							fail: (res) => {
								fail();
							}
						});
						// #endif
					} else if (rs.code == 101) {
						// 优惠券抵消后支付0元
						uni.showToast({
							title: rs.msg,
							icon: 'none',
							duration: 1000
						});
						uni.hideLoading();
						uni.switchTab({
							url: '/pages/order/index'
						});
					};
				});
			},
		}
	}
</script>

<style>
	page {
		background: #F4F4F4FF;
	}
</style>

<style lang="scss" scoped>
	::v-deep .memberOilPopup view.uni-popup {
		z-index: 9999 !important;
	}

	::v-deep .memberBox view.uni-popup {
		z-index: 999 !important;
		height: 1000rpx !important;
	}

	/* 修改pupop 默认层级和背景透明度 */
	// 微信
	/* #ifdef MP-ALIPAY */
	::v-deep .uni-popup {
		z-index: 99999 !important;
	}

	::v-deep .vue-ref {
		background-color: rgba(0, 0, 0, 0.4) !important;
	}

	/* #endif */
	// 微信
	/* #ifndef MP-ALIPAY */
	::v-deep .random-reduce .uni-popup {
		z-index: 99999 !important;
	}

	::v-deep .random-reduce .vue-ref {
		background-color: rgba(0, 0, 0, 0.4) !important;
	}

	/* #endif */

	.order-top {
		.top-content {
			margin: 20rpx 30rpx;
			min-height: 330rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;

			.oil-item-top {
				display: flex;
				margin-bottom: 40rpx;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
				}

				.oil-item-data {
					width: calc(100% - 17rpx);
					margin-left: 20rpx;

					.oil-title {
						display: flex;

						text {
							width: calc(100% - 40rpx);
							margin-bottom: 15rpx;
							margin-top: 10rpx;
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #222222;
						}

						.collect {
							margin-left: 20rpx;
							margin-top: 10rpx;

							text {
								color: #F12F63;
								font-size: 50rpx;
							}
						}
					}

					.address-box {
						width: calc(100% - 80rpx);
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #444444;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						.address {
							line-height: 50rpx;
						}

						.distance-box {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #8F96AC;

							.GPS-img {
								margin-left: 20rpx;
								width: 38rpx;
								height: 38rpx;
							}

							.kp {
								color: #F12F63;
								margin-left: 30rpx;
								border: 1rpx solid #F12F63;
								padding: 4rpx 8rpx;
								border-radius: 8rpx;
							}
						}
					}
				}
			}

			.oil-item-bottom {
				border-top: 1rpx solid rgba(84, 84, 84, 0.15);
				padding-top: 30rpx;

				.price-box-main {
					display: flex;
					justify-content: space-around;
					align-items :center;
					font-size: 23rpx;
					font-family: PingFang SC;
					font-weight: 450;
				.price-item{
						width: 24%;
						height: 35rpx;
						line-height: 35rpx;
						text-align: center;
						
						.price {
							color: #F12F63;
							border: 1rpx solid rgba(241, 47, 99, 0.15);
							border-radius: 5rpx;
							margin-right: 8rpx;
							background-color: rgba(241, 47, 99, 0.1);
						}
						
						.o-price {
							border: 1rpx solid rgba(84, 84, 84, 0.15);
							border-radius: 5rpx;
							background-color: rgba(84, 84, 84, 0.1);
						}
					}
					
				}
			}
		}
	}

	.active_banner {
		height: 240rpx;
		// background-color: #50ACF8;
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
		box-sizing: border-box;

		image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}

	.order-center {
		margin: 20rpx 30rpx;
		padding: 20rpx 0;
		border-radius: 20rpx;
		box-sizing: border-box;
		background: #fff;

		.oil-pub-t {
			display: flex;
			flex-direction: column;
			color: #F12F63;
			align-items: center;
			font-size: 48rpx;
		}
	}

	.tab-list {
		width: 100%;
		height: 88rpx;
		// background: #fff;
		// border-bottom: 1px solid #efefef;

		.tab-list-in {
			width: 60%;
			height: 100%;
			margin: 0rpx auto;

			.tab-item {
				position: relative;

				.hi-color {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #222222;
				}

				text {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					padding-bottom: 10rpx;
				}

				.b-line {
					position: absolute;
					bottom: -10rpx;
					width: 100rpx;
					height: 8rpx;
					background: #F12F63;
					border-radius: 30rpx;
				}
			}
		}
	}

	.oil-num {
		margin: 30rpx 20rpx;

		image {
			width: 14rpx;
			height: 14rpx;
		}

		.oil-num-gun {
			font-weight: bold;
		}

		.oil-num-center {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			margin-top: 20rpx;

			.gun-choose {
				display: flex;
				align-items: flex-end;

				view {
					width: 100rpx;
					height: 45rpx;
					border: 1rpx solid rgba(97, 97, 97, 0.6);
					border-radius: 10rpx;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					font-size: 26rpx;
					box-shadow: 10rpx 10rpx 20rpx 0rpx rgba(86, 86, 86, 0.3);
				}

				.choose-left {
					margin-right: 10rpx;
				}

				.choose-right {
					text {
						width: 29rpx;
						overflow: hidden;
						white-space: pre;
						word-break: keep-all;
						margin-right: -8rpx;
						text-align: right;
						text-overflow: clip;
					}
				}
			}

			.oil-price {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;

				.oil-price-text {
					width: 80rpx;
					height: 35rpx;
					font-size: 24rpx;
					font-weight: bold;
					line-height: 35rpx;
					text-align: center;
					color: #F12F63;
					border: 1rpx solid rgba(241, 47, 99, 0.15);
					border-radius: 8rpx;
					background-color: rgba(241, 47, 99, 0.1);
					margin-right: 10rpx;
				}

				.oil-price-num {
					position: relative;
					font-size: 26rpx;
					color: #F12F63;

					text {
						font-size: 48rpx;
						font-weight: bold;
					}

					.price-icon {
						position: absolute;
						top: 0;
						right: -25rpx;
						z-index: 10;
					}
				}
			}

			.oil-price-right {
				width: 140rpx;
				margin-left: 10rpx;
				font-size: 19rpx;
				color: rgba(97, 97, 97, 1.0);
			}
		}
	}

	.active-price {
		margin: 30rpx 0;
		position: relative;

		.price-image {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: -21rpx;
			left: 42%;
		}

		.active-price-text {
			background-color: #FAFAFA;
			min-height: 140rpx;
			border: 1rpx solid #F1F1F1;
			border-radius: 10rpx;
			padding: 25rpx 15rpx;
		}
	}

	.sel-monney-title {
		font-size: 32rpx;
		margin-top: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #303030;
		padding-bottom: 32rpx;
	}

	.input-box {
		width: 100%;
		height: 100rpx;
		border: 2px solid #A7A7A7;
		box-sizing: border-box;
		border-radius: 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		color: #858585;

		input {
			width: 55%;
		}

		view {
			width: 35%;
			text-align: right;
		}
	}

	.monney-list {
		padding-top: 20rpx;

		view {
			width: 31%;
			height: 90rpx;
			border: 1rpx solid #F1F1F1;
			border-radius: 20rpx;
			background-color: #FAFAFA;
		}

		.act-item {
			border: 1px solid #F12F63 !important;
			background: rgba(241, 47, 99, .1);
		}

		.t-tltle {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #323232;
		}

		.youhui {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #858585;
			// padding-top: 10rpx;
		}
	}

	.sel-b-box {
		margin: 20rpx 30rpx;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		background: #fff;
		font-size: 32rpx;

		.img-box {
			width: 50rpx;
			text-align: center;
			margin-right: 10rpx;
		}

		.icon-img0 {
			width: 35rpx;
			height: 34rpx;
		}

		.icon-img {
			width: 47rpx;
			height: 31rpx;
		}

		.icon-img2 {
			width: 33rpx;
			height: 39rpx;
		}

		.icon-img3 {
			width: 40rpx;
			height: 42rpx;
		}

		.icon-img4 {
			width: 33rpx;
			height: 34rpx;
		}

		.sel-box-title {
			font-family: PingFang SC;
			color: #303030;
			padding-bottom: 32rpx;
		}

		.yh {
			padding-top: 20rpx;

			.yh-item1 {
				height: 70rpx;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				font-weight: bold;
			}

			.yh-item {
				margin-top: 20rpx;
				height: 70rpx;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;

				.yh-item-left {
					display: flex;
					align-items: center;
					position: relative;

					.Noservice {
						width: 300rpx;
						position: absolute;
						top: 38rpx;
						left: 50rpx;
					}
				}

				.yh-item-right {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
				}

				.item-right-text {
					font-size: 30rpx;
					color: #A4A4A4;
				}

				.item-right-balance {
					font-size: 27rpx;
					color: #A4A4A4;
				}

				.tips-icon {
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}

				.no-share {
					font-family: PingFang SC;
					font-weight: 400;
					color: #222222;
				}
			}

			.footer-monney {
				border-top: 1px dashed #EEEEEE;
				padding-top: 26rpx;

				.pub-text {
					font-family: PingFang SC;
					font-weight: 400;
					color: #8D8B8E;
					padding-right: 32rpx;
				}

				.s-monney {
					font-family: PingFang SC;
					color: #222222;
				}
			}

		}

		.yh-2 {
			padding-top: 20rpx;

			.yh-item1 {
				height: 90rpx;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				font-weight: bold;
			}

			.yh-item {
				// margin-top: 20rpx;
				height: 90rpx;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;

				.yh-item-left {
					display: flex;
					align-items: center;
					position: relative;

					.Noservice {
						position: absolute;
						top: 20rpx;
					}
				}

				.yh-item-right {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
				}

				.item-right-text {
					font-size: 30rpx;
					color: #A4A4A4;
				}

				.item-right-balance {
					font-size: 27rpx;
					color: #A4A4A4;
				}

				.tips-icon {
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}

				.no-share {
					font-family: PingFang SC;
					font-weight: 400;
					color: #222222;
				}
			}

			.footer-monney {
				border-top: 1px dashed #EEEEEE;
				padding-top: 26rpx;

				.pub-text {
					font-family: PingFang SC;
					font-weight: 400;
					color: #8D8B8E;
					padding-right: 32rpx;
				}

				.s-monney {
					font-family: PingFang SC;
					color: #222222;
				}
			}

		}
	}

	.member-oil-money-box {
		margin: 20rpx 30rpx;
		min-height: 300rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;

		.member-oil-money {
			margin: 20rpx 0;
			border: 10rpx solid #F12F63;
			border-radius: 30rpx;
			padding-top: 70rpx;
			background: linear-gradient(to bottom, #FBE2E5, #fff);
			position: relative;

			.label {
				width: 200rpx;
				height: 80rpx;
				// text-align: center;
				color: white;
				display: flex;
				font-weight: bold;
				font-size: 30rpx;
				position: absolute;
				top: 0;
				background-image: url();
				background-repeat: no-repeat;
				background-size: 100%;

				text {
					margin-left: 15rpx;
				}

				.u-icon {
					position: absolute;
					top: 5rpx;
					left: 200rpx;
				}
			}

			.member_oil_tip {
				color: #F12F63;
				font-size: 28rpx;
				position: absolute;
				right: 20rpx;
				top: 10rpx;
			}

			.info-center {
				display: flex;
				justify-content: space-evenly;

				.time-rule {
					display: flex;
					flex-direction: column;
					align-items: center;

					.rule-money {
						font-weight: bold;
						font-size: 32rpx;

						.addoil_money {
							font-size: 40rpx;
							color: #F12F63;
						}
					}

					.rule-text {
						font-size: 24rpx;
						color: #858585;

						.rule-text-content {
							display: flex;
							flex-direction: column;
							align-items: center;
						}
					}
				}

				.number {
					display: flex;
					flex-direction: column;
					align-items: center;

					.calc {
						font-weight: bold;
						font-size: 32rpx;

						.num {
							font-size: 40rpx;
							color: #F12F63;
						}
					}

					.calc-text {
						font-size: 24rpx;
						color: #858585;
						display: flex;
						flex-direction: column;
						align-items: center;
					}
				}
			}

			.info-bottom {
				display: flex;
				justify-content: space-between;
				width: 85%;
				margin: 30rpx auto;

				.active-rule {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 150rpx;
					height: 40rpx;
					font-size: 26rpx;
					color: #F12F63;
					text-align: center;
					line-height: 40rpx;
					border: 1rpx solid #F12F63;
					border-radius: 10rpx;
				}

				.radio {
					display: flex;
					align-items: center;

					radio {
						margin-left: 15rpx;
					}
				}
			}
		}
	}

	.pay-type {
		margin: 20rpx 30rpx;
		min-height: 156rpx;
		background: #fff;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		box-sizing: border-box;

		.pay-type-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #303030;
			padding-bottom: 30rpx;
		}
	}

	.package_box {
		width: 100%;
		height: 200rpx;
		background: linear-gradient(to bottom, #FCEAEA, #FFF8F8);
		position: fixed;
		z-index: 10;
		padding: 20rpx;
		// overflow-y: auto;
		box-sizing: border-box;
		bottom: 112rpx;

		.package-box-big {
			margin: 1rpx 30rpx;
			position: relative;
		}

		.box-title {
			color: #F12F63;
			font-weight: bold;
		}
		.box-text{
			width: 420rpx;
			font-size: 26rpx;
			color: #666666;
		}
		.box-rule{
			display: inline-block;
			padding: 5rpx 10rpx;
			border: 1rpx solid #666666;
			border-radius: 20rpx;
			font-size: 26rpx;
			color: #666666;
		}
		.active-rule {
			position: absolute;
			right: 0;
			top: 40rpx;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// width: 150rpx;
			// height: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #F12F63;
			// text-align: center;
			// line-height: 40rpx;
			// border: 1rpx solid #F12F63;
			// border-radius: 10rpx;
		}

		.package_number {
			display: flex;
			font-size: 24rpx;
			color: #333333;
			margin-top: 20rpx;

			.calc {
				width: 120rpx;
				height: 80rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
			}

			.all {
				width: 150rpx;
				height: 80rpx;
				margin: 0 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				border-right: 1rpx solid rgba(158, 158, 158, 0.3);
				border-left: 1rpx solid rgba(158, 158, 158, 0.3);
			}

			.num {
				font-weight: bolder;
				color: #F12F63;
				font-size: 32rpx;
			}
		}

		.radio {
			position: absolute;
			right: 60rpx;
			top: 100rpx;
			width: 140rpx;
			height: 65rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;
			border-radius: 10rpx;
			background: linear-gradient(to right, #F6D054, #FDD5A4);
			font-size: 24rpx;

			.pushPay_btn {}
		}
	}

	.pay-box {
		width: 100%;
		position: fixed;
		z-index: 999;
		bottom: 0;
		height: 120rpx;
		background: #fff;
		border-top: 1px solid #EEEEEE;

		.pay-big {
			margin: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}

		.total-price {
			color: #F12F63;
			font-size: 34rpx;

			.stationTakePrice {
				text-decoration: line-through;
				color: #444444;
				font-size: 24rpx;
				margin-left: 10rpx;
			}
		}

		.total-detail {
			display: flex;
			align-items: center;
			font-size: 26rpx;
		}

		.discount {
			font-size: 28rpx;
		}

		.total {}

		.pay-m {
			.pay-btn {
				width: 200rpx;
				height: 80rpx;
				background-color: #F12F63;
				border-radius: 40rpx;
				color: #fff;
				font-weight: bold;
				font-size: 34rpx;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}

	.detail-content {
		width: 100%;
		min-height: 70vh;
		padding-bottom: 112rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;

		.d-content {
			margin: 20rpx 10rpx;

			.item-title {
				height: 80rpx;
				line-height: 80rpx;
				font-weight: bold;
			}

			.d-item {
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.w-center {
			.m-detail-title {
				padding-top: 30rpx;

				text {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1A1A1A;
				}
			}

			.label-title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #1A1A1A;
				// padding-bottom: 40rpx;
			}

			.detail-item {
				padding-bottom: 30rpx;

				view {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
				}
			}

			.shop-list {
				.act-item {
					border: 1px solid #F12F63 !important;
					color: #F12F63;
					background: rgba(241, 47, 99, .1);
					box-sizing: border-box;
				}

				view {
					// width: 23%;
					height: 60rpx;
					// padding: 0 40rpx;
					background: #F2F2F2;
					border-radius: 10rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #7B8195;
					letter-spacing: 1px;
					margin-right: 40rpx;
					margin-bottom: 30rpx;
					padding: 0 30rpx;
				}
			}

		}
	}

	.m-detail {
		width: 100%;
		// height: 750rpx;
		padding-bottom: 112rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;

		.w-center {
			.m-detail-title {
				padding-top: 30rpx;
				text-align: center;

				.prefer {
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: #F12F63;
					font-size: 36rpx;
				}

				.prefer-text {
					font-size: 26rpx;
					color: #444444;
				}

				text {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1A1A1A;
				}
			}

			.table-prefer {
				border-right: 1rpx solid #858585;
			}

			.prefer-tip {
				color: #858585;

				view {
					margin-top: 30rpx;
					font-size: 24rpx;
				}
			}

			.label-title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #1A1A1A;
				// padding-bottom: 40rpx;
			}

			.important {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;

				text {
					color: #F12F63;
				}
			}

			.detail-item {
				padding-bottom: 30rpx;

				view {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
				}
			}

			.shop-list {
				.act-item {
					border: 1px solid #F12F63 !important;
					color: #F12F63;
					background: rgba(241, 47, 99, .1);
					box-sizing: border-box;
				}

				view {
					height: 90rpx;
					width: 23%;
					background: #F2F2F2;
					border-radius: 10rpx;
					text-align: center;
					line-height: 90rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #7B8195;
					letter-spacing: 1px;
					margin-right: 10rpx;
					margin-top: 15rpx;
				}
			}

		}

		.b-out {
			padding-top: 60rpx;

			.sel-btn {
				width: 440rpx;
				height: 88rpx;
				border-radius: 44rpx;
				background: #F12F63;
				text-align: center;
				line-height: 88rpx;
				margin-top: 40rpx;
				margin: 0 auto 30rpx auto;
				// margin: 60rpx auto 60rpx auto;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

	}

	.member-oil-popup {
		height: 70vh;
	}

	.label-box {
		padding-top: 50rpx;

		.label-item {
			height: 48rpx;
			background: #F6F6F6FF;
			border-radius: 10rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #777777;
			padding: 0 10rpx;
			margin-right: 12rpx;
			margin-bottom: 12rpx;
		}
	}

	.order-dts {
		width: 100%;
		// height: 380rpx;
		height: 220rpx;
		background: #fff;
		// margin-top: 10rpx;
		// margin-bottom: 15rpx;
		// padding:15rpx 30rpx;
		box-sizing: border-box;

		&.height-auto {
			height: auto;
		}

		.order-dts-item {
			width: 100%;
			justify-content: space-between;
			height: 70rpx;
			align-items: center;

			&.w-100 {
				width: 100%;
			}

			.order-dts-item-text {
				font-size: 20rpx;
				color: #666666;
				margin-left: 46rpx;
			}

			view {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #040818;
			}

			text {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 400;
				// color: #F12F63;
				color: #666666;
			}

			.coupon-tips {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx;
				background-color: #fafafa;
				border: 1rpx solid #e5e5e5;
				border-radius: 10rpx;
				font-size: 23rpx;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.coupon-tips {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx;
		background-color: #fafafa;
		border: 1rpx solid #e5e5e5;
		border-radius: 10rpx;
		font-size: 23rpx;

		image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}
	}

	.goods-box {
		// display: flex;
		// align-items: center;
		// padding: 30rpx;
		// padding-top: 0;
		background-color: #FFF;

		.goods-info {
			width: 110rpx;
			height: 200rpx;
			margin-top: 10rpx;
			background-color: #efefef;
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			// padding-left: 160rpx;
			>image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 12rpx;
			}

			.goods-detail {
				display: flex;
				flex-direction: column;
				align-items: center;

				// padding-left: 20rpx;

				text:nth-child(1) {
					padding-top: 5rpx;
					font-size: 25rpx;
				}

				view {
					padding-top: 5rpx;
					font-size: 25rpx;
					color: #F12F63;
				}
			}
		}
	}
	.coupon-title{
		margin-left: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		line-height: 50rpx;
	}
	.bottom-content {
		margin: 20rpx 30rpx;
		padding: 20rpx;
		min-height: 200rpx;
		background: linear-gradient(140deg, rgba(252, 47, 3, 0.8), rgba(200, 45, 30, 0.1));
	}
	.coupon-item {
		min-height: 200rpx;
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		background-color: rgba(254, 248, 236, 1.0);
		overflow: hidden;
		margin: 30rpx 30rpx 0;
		// box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;
		box-sizing: border-box;
		
		.coupon-money {
			min-height: 200rpx;
			// background-color: #fff;
			position: relative;
			width: 30%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 0 16rpx 16rpx 0;
			border-left: 2rpx dashed #fff;
			box-sizing: border-box;
	
			.oil-item-data {
				color: #F12F63;
				font-size: 60rpx;
				font-weight: bold;
	
				text {
					font-size: 30rpx;
				}
			}
	
			.oil-item-datas {
				color: #555;
				font-size: 24rpx;
			}
	
			&::after {
				content: '';
				width: 20rpx;
				height: 20rpx;
				// border-radius: 50%;
				border-radius: 0 0 100rpx 100rpx;
				background-color: #fff;
				position: absolute;
				top: 0rpx;
				left: -10rpx;
			}
	
			&::before {
				content: '';
				width: 20rpx;
				height: 20rpx;
				border-radius: 100rpx 100rpx 0 0;
				background-color: #fff;
				position: absolute;
				bottom: 0rpx;
				left: -10rpx;
			}
		}
	
		.coupon-info {
	
			position: relative;
			flex: 1;
			height: 100%;
			// background-color: #fff;
			display: flex;
			align-items: center;
			padding: 10rpx 30rpx;
			border-radius: 16rpx 0 0 16rpx;
			box-sizing: border-box;
	
			.main-part {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
	
			.oil-item-name {
				font-size: 30rpx;
				font-weight: bold;
				padding-bottom: 12rpx;
			}
	
			.oil-item-datatow {
				font-size: 22rpx;
				color: #555;
				padding-bottom: 4rpx;
			}
	
			.oil-item-expiration {
				font-size: 22rpx;
				color: #555;
			}
	
	
	
			// 		&::after {
			// 			content: '';
			// 			width: 20rpx;
			// 			height: 20rpx;
			// 			border-radius: 50%;
			// 			background-color: #f3f3f3;
			// 			position: absolute;
			// 			top: -10rpx;
			// 			right: -10rpx;
			// 		}
	
			// 		&::before {
			// 			content: '';
			// 			width: 20rpx;
			// 			height: 20rpx;
			// 			border-radius: 50%;
			// 			background-color: #f3f3f3;
			// 			position: absolute;
			// 			bottom: -10rpx;
			// 			right: -10rpx;
			// 		}
		}
	
	}
</style>
